Material components for the web, Buttons

574

Following is the basic code to add a button in Material components for the web (MDC), As you can see the class mdc-button is responsible for adding the styles for button.

<button class="mdc-button">
  Basic Button
</button>

Following are some of the advanced stylings you can use with the buttons in Material components for the web (MDC)

1. Outlined Button

<button class="mdc-button mdc-button--outlined">
  Outlined Button
</button>

2. Raised Button

<button class="mdc-button mdc-button--raised">
 Raised Button
</button>

Disabling buttons

You can add the disable html attribute to any of the button element to get the disable effect.

<button class="mdc-button" disabled>
 Disabled Button
</button>

Demo

<iframe height='437' scrolling='no' title='mLpbZm' src='//codepen.io/fastfoodcoding/embed/mLpbZm/?height=437&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/fastfoodcoding/pen/mLpbZm/'>mLpbZm</a> by fastfoodcoding (<a href='https://codepen.io/fastfoodcoding'>@fastfoodcoding</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

Complete Code

<html>
  <head>
    <title>Material Components for the web Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  </head>
  
  <body class="mdc-typography">
    <h3 class="mdc-typography--display2">Material Components for the web, Button Examples</h3>
    
    Basic button:
    
    <button class="mdc-button">
      Basic Button
    </button>
    
    <br><br>
    
    Disabled Button: 
    <button class="mdc-button" disabled>
      Disabled Button
    </button>
    
    <br><br>
    
     Raised Button: 
    <button class="mdc-button mdc-button--raised">
      Raised Button
    </button>
    
    <br><br>    
    
     Outlined Button: 
    <button class="mdc-button mdc-button--outlined">
      Outlined Button
    </button>
            
    <br><br><br><br>
    
    <hr>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>
  
</html>