Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Materialize CSS | Buttons

  • Last Updated : 22 Jun, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :