The button component along with the links inside them are probably one of the most significant features allowing the users to interact with the web pages and perform various functions and move from one web page to other. Following are the various classes of buttons defined along with their effect:
-
Raised: It is used to set ripple click effect and can also be used in combination with various other classes.
<a class="waves-effect waves-light btn">button</a> <a class="waves-effect waves-light btn"><i class="material-icons left">list</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">list</i>button</a>
-
Floating: It is used for creating circular button.
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">edit</i></a>
-
Flat: It is used for setting flat display effect to a button which reduces excessive layering. For example, flat buttons are generally used for actions within a card so that there aren’t too many overlapping shadows.
<a class="waves-effect waves-teal btn-flat">Button</a>
-
Submit Button: It is used to represent as a primary button. When submitting a form using button, instead of using input tag, button tag with type submit can be used.
<button class="btn waves-effect waves-light" type="submit" name="action">Submit <i class="material-icons right">send</i> </button>
-
Large: It is used for buttons that needs more attention.
<a class="waves-effect waves-light btn-large">Button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons left">list</i>button</a> <a class="waves-effect waves-light btn-large"><i class="material-icons right">list</i>button</a>
- Small: It is used when mouse and keyboard are the primary input methods, this button is used for denser UI layouts.
<a class="waves-effect waves-light btn-small">Button</a> <a class="waves-effect waves-light btn-small"><i class="material-icons left">list</i>button</a> <a class="waves-effect waves-light btn-small"><i class="material-icons right">list</i>button</a>
- Disabled: It is used to create disables button.
<a class="btn-large disabled">Button</a> <a class="btn disabled">Button</a> <a class="btn-flat disabled">Button</a> <a class="btn-floating disabled"><i class="material-icons">edit</i></a>
Example:
HTML
<!DOCTYPE html> <html>
<head>
<!--Import Google Icon Font-->
<link href=
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href=
<script type="text/javascript" src=
</script>
<!--Let browser know website is
optimized for mobile-->
<meta name="viewport" content
="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="card-panel">
<h3>Raised Button</h3>
<a class="waves-effect waves-light
btn green">button</a>
<a class="waves-effect waves-light
btn green"><i class="material-icons
left">list</i>button</a>
<a class="waves-effect waves-light
btn green"><i class="material-icons
right">list</i>button</a>
</div>
<div class="card-panel">
<h3>Floating Button</h3>
<a class="btn-floating btn-large
waves-effect waves-light teal">
<i class="material-icons">edit</i>
</a>
</div>
<div class="card-panel">
<h3>Flat Button</h3>
<a class="waves-effect waves-green
btn-flat">Button</a>
</div>
<div class="card-panel">
<h3>Submit Button</h3>
<button class="btn green waves-effect
waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
<div class="card-panel">
<h3>Large Button</h3>
<a class="waves-effect waves-light
btn-large green">Button</a>
<a class="waves-effect waves-light
btn-large green"><i class=
"material-icons left">list</i>
button
</a>
<a class="waves-effect waves-light
btn-large green"><i class="material-icons
right">list</i>button</a>
</div>
<div class="card-panel">
<h3>Small Button</h3>
<a class="waves-effect waves-light
btn-small green white-text">Button</a>
<a class="waves-effect waves-light
btn-small green white-text"><i class=
"material-icons left">list</i>button</a>
<a class="waves-effect waves-light
btn-small green white-text"><i class=
"material-icons right">list</i>button</a>
</div>
<div class="card-panel">
<h3>Disabled Button</h3>
<a class="btn-large disabled">Button</a>
<a class="btn disabled">Button</a>
<a class="btn-flat disabled">Button</a>
<a class="btn-floating disabled">
<i class="material-icons">edit</i></a>
</div>
<!-- Compiled and minified JavaScript -->
<script src=
</body>
</html>
|
Output: