Materialize CSS | Buttons

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.