Materialize CSS Buttons
There are mainly three types of Pure CSS buttons in the Materialize CSS. The followings are the Materialize CSS buttons:
- Raised Button
- Floating Button
- Flat Button
Raised Button
To create Materialize CSS raised button, add .btn class to the <button> or <a> element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Materialize CSS Button
Raised ButtonFloating Buttton
To create floating button, add .btn-floating as well as additional color classes to the <button> or <a> element base class
General Syntax
Try it nowSource Code
Source Code : Output
Materialize CSS Floating Button
addFlat Button
To create flat button, add .btn-flat class to the <button> or <a> element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Submit Button
To create submit button, add .btn class to the <button> tag with a type submit.
General Syntax
Try it nowSource Code
Source Code : Output
Materialize CSS Button Size
Large Button
To create large button, add .btn-large to the to <button> or <a> element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Small Button
To create small button, add .btn-small class to the to <button> or <a> element base class.
General Syntax
Try it nowSource Code
Source Code : Output
Small Button
Small ButtonDisabled Button
To create disabled button, add .disabled class to the to <button> or <a> element base class.