A Material Button Is More Than a Button

How to style (and differentiate) buttons using Material Design theming

David Allin Reese
Dec 12, 2018 · 6 min read

Material Design recently released updated shape guidance, tools, and case studies to show how easy it is to style UI components using Material Theming. To further illustrate the theming capabilities of the new shape system, we created live examples of Material Buttons in a variety of themes using Material Components for the Web on Glitch. Glitch allows anyone (even you) to remix these button examples and realize their expressive potential using code. In a nutshell, the following button examples twist the same proverbial knobs within Material Theming to achieve vastly different visual results. As more and more brands exist exclusively in the digital space, themed components are now as important as a logo in how users relate to your brand.

Each button on Glitch has been themed to reflect a fictional brand or product such as a flower delivery service or podcast app. This guide will deconstruct each button’s theme in terms of brand and the Material Color, Type, and Shape systems.

Material DIY — Learn how to remix these buttons yourself in the button’s .readme file.

Synergee

Synergee is a meditation guidance app that guides users through meditation journeys via haptic technology and other non-visual means. Synergee’s brand has the following attributes: bright, humble, and sophisticated.

Color

$mdc-theme-primary: #ded7ff;
$mdc-theme-on-primary: #003db8;

Type

$mdc-typography-font-family: unquote("K2D, sans-serif");
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 500,
letter-spacing: 0.05em,
);

Shape

$mdc-shape-small-component-radius: (24px);

Red Roses

Red Roses is a flower delivery service that promotes positivity through the act of giving and embodies the following brand attributes: natural, joyful, and elegant.

Color

$mdc-theme-primary: #b31839;
$mdc-theme-on-primary: #ffffff;

Type

$mdc-typography-font-family: unquote("Cabin, sans-serif");
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 500,
letter-spacing: 0.05em,
);

Shape

$mdc-shape-small-component-radius: (4px 12px 4px 12px);

Done!

Done! is a task management app which emphasizes quick, compact experiences to allow users to complete their tasks, distraction free. The Done! brand has the following attributes: professional, fast and succinct.

Color

$mdc-theme-primary: #5973bf;
$mdc-theme-on-primary: #ffffff;

Type

$mdc-typography-font-family: unquote("Libre Franklin, sans-serif");
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 500,
letter-spacing: 0.02em,
text-transform: capitalize,
);

Shape

$mdc-shape-small-component-radius: (0px);

Moodie

Moodie is a mysterious mood ring app that determines your mood by collecting biometric data. Its brand has the following brand attributes: mysterious, technical, and delightful.

Color

$mdc-theme-primary: #009b3b;
$mdc-theme-on-primary: #003db8;

Type

$mdc-typography-font-family: unquote("IBM Plex Mono, sans-serif");
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 600,
letter-spacing: 0.05em,
);

Shape

$mdc-shape-small-component-radius: (8px);

Waverly

Waverly is a podcast streaming service that focuses on the curation of playlists for different types of content around a single topic such as podcasts, articles, videos, or music. Waverly embodies the following brand attributes: industrious, contemporary, and curated.

Color

$mdc-theme-primary: #FE8A00;
$mdc-theme-on-primary: #003db8;

It’s important to note that a dark “theme” is different than a dark “mode.” A dark mode is turned on by a user by performing a specific action, while a dark theme is inherent to the theme based on brand colors or other factors.

Type

$mdc-typography-font-family: unquote("Montserrat, sans-serif");
$mdc-typography-styles-button: (
font-size: 14px,
font-weight: 600,
letter-spacing: 0.05em,
);Shape

In this particular example, Waverly is using a Material text button in which there is no outline or box to indicate a shape. Though there is no visible shape, upon interaction (such as hovering with a cursor or tapping) a user is able to see the bounds of a button and its shape. Waverly’s shape story is soft spoken and speaks to its contemporary and industrious attributes by leveraging Material’s familiar baseline shape.

$mdc-shape-small-component-radius: (4px);

Material Design + Glitch

Remix and share what you make!
glitch.com/@material

💙

Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store