Page Title

Intro
What is Material Design?
Components
Buttons

What is Material Design?

Material Design is a design language developed by Google. It contains a bunch of pre-build components which make building a beautiful UI easy. To get started, add Material from the cdn:
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"> <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

MDC: Buttons

MDC (Material Design Components) offers a few different buttons:

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

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

<button class="mdc-button mdc-button--unelevated"> Unelevated Button </button>

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

<button class="mdc-button mdc-button"> <i class="material-icons mdc-button__icon" aria-hidden="true">cloud</i> Icon Button </button>

Now let's add a ripple effect:


              const buttons = document.querySelectorAll('.mdc-button');
buttons.forEach(button => mdc.ripple.MDCRipple.attachTo(button))

Material Design Tutorial: Buttons