Materialize CSS Buttons: Variants, Waves and Icons

Quick answer: A Materialize button is one class plus options: btn for the base button, a color class like red or blue-grey darken-1 for the background, a modifier like flat, floating, large or disabled, and the waves-effect class for the ripple animation. Buttons come in five types — raised, flat, floating, link and fixed — and every one of them shares the same color palette (named colors with light/dark shade suffixes). The two questions beginners hit are how to change the default blue, answered with one color class, and how to customize deeper, answered with the SCSS variables or a CSS override shown below.

The five button types

<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
<button class="btn flat">Cancel</button>
<a class="btn-floating red waves-effect waves-light"><i class="material-icons">edit</i></a>
<a class="btn-link">Forgot password?</a>

The ripple (waves-effect) is a separate class on purpose: you can have a button without animation and animation on non-buttons, like cards and list rows. On 1.0.0 the ripple initializes automatically through M.AutoInit() — if your page does not load Materialize 1.0.0 yet, the Materialize CSS tutorial sets that up in the first five minutes.

Colors: the full shading system

Every Materialize color is a family, not a value. You write the color name, then optionally a shade suffix, and the framework resolves it — no hex codes required:

Palette names follow Material Design: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, blue-grey, grey and black. That is the same palette the colors guide documents for text, chips and surfaces — one naming system across the whole framework.

Changing the default button size and shape

Modifiers cover the common cases without CSS: btn-large and btn-small scale, disabled greys out and blocks clicks, block makes the button full-width for mobile forms, and centered centers it in its container.

<button class="btn-large blue darken-2">Get started</button>
<button class="btn block">Full width on mobile</button>
<button class="btn" disabled>Processing…</button>

/* Custom shape: pill buttons, overriding the framework */
.my-pill.btn { border-radius: 24px; padding: 0 24px; }

For brand-level customization — your company blue as the default, different elevation, different ripple opacity — the clean override targets Materialize’s CSS custom properties and button rules rather than fighting specificity with !important everywhere. The simple raised button customization post walks through the exact properties: background, box-shadow, text-transform and letter-spacing are the four that define the framework’s button identity, and overriding them once on .btn restyles every button on the site.

Buttons that submit, navigate, or neither

• Submit: <button class="btn" type="submit"> inside a form — the type matters; plain btn inside a form defaults to submit anyway, but be explicit.
• Navigate: use an <a class="btn"> with href — semantically correct for links, and middle-click works.
• Neither (JavaScript action): type="button" so it never accidentally submits the form it sits in.

Icon buttons follow the same rules with the icon inside: <i class="material-icons">send</i> renders the ligature name as a glyph, so the text inside the tag is the icon — misspelling it shows the words instead. For icon-plus-text buttons, put the icon first with 8px right margin and the label after.

Want a review of the button system in your actual project — hit states, contrast, form wiring? Ampersand Academy teaches Materialize one-to-one and checks the details that tutorials skip.

Frequently asked questions