A Material Button Is More Than a Button

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

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

Meditation guidance app

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

The use of light and dark blues dominate Synergee’s brand and speak to its bright and humble attributes. By replicating the feeling of looking up at the sky, the colors express a certain familiarity that feels pleasantly friendly.

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

Type

Synergee expresses its sophisticated brand attribute through the use of K2D, a Thai and Latin typeface created by Cadson Demak. K2D includes traditional Thai letterforms which are inherently round and “loopy,” it’s cool to see how the design characteristics of the Latin alphabet and the Thai abugida were morphed into something unique and exciting.

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

Shape

Synergee’s bright brand attribute dictates that the theme should express a sense of forward friendliness and optimism. To express this, Synergee’s shape system is heavily rounded with small components like buttons being completely round.

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

Red Roses

Flower delivery service

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

The color system utilizes tones of red that speak to the naturalness of roses, and make it easy to create contrast between different components. Buttons use your Material Theme’s primary color by default.

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

Type

The Red Roses theme uses Cabin, a humanist sans typeface found on Google Fonts; Cabin’s letterforms possess a combination of round and sharp outlines that speak to Red Roses’ natural and elegant brand attributes. (Cabin takes inspiration from Gill Sans, which was inspired by London Underground’s “Underground Alphabet”).

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

Shape

Red Roses’ shape system speaks to both its joyful and natural brand attributes by mimicking flower petals. The alternating radii for this button reflects the (im)perfection of flora and the natural world; in combination with color, this shape creates strong visual impact.

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

Done!

Task management app

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

In order to speak to Done!’s professional and simple brand attributes, the theme uses a conservative palette consisting of white and a fairly neutral blue. Additionally, to minimize distraction and express speed, Done!’s buttons refrain from including a shadow.

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

Type

The rigid typeface Libre Franklin stands boldly and dependably in contrast to Done!’s conservative color palette. Libre Franklin is an expansion of the Franklin Gothic typeface, which was often used for newspaper headlines or billboards; it’s easy to see the business-like qualities of Libre Franklin in the context of Done!’s button.

$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

Done’s shape system speaks to the brand’s speed and succinctness by refraining from adding the visual weight of curved or angled corners.

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

Moodie

Mood ring app

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

Moodie’s mysterious and technical brand attributes are characterized by the brands use of “terminal” green, often associated with vintage computer systems and graphics. In contrast to most common interfaces, Moodie’s use of color speaks largely to the brands ambiguous narrative and serves as a basis for the color-changing magic of mimicking a mood ring.

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

Type

IBM Plex Mono exaggerates Moodie’s technical brand attribute in a similar way to its color system; the use of a monospace font hints at the technicality involved with Moodie’s product. In combination with a mysterious and delightful call-to-action, IBM Plex Mono acts subtextually, hinting at something alien.

$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

Continuing on themes of ambiguity, Moodie’s shape story focuses on the in-between space of soft and rigid, round and sharp, to again express a distorted but playful view of the ‘mysterious’ technology behind the product.

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

Waverly

Podcast streaming app

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

To place primary focus on curated content, Waverly’s Material Theme is a dark theme, which just means the majority of the UI is dark in color with accents of light color to indicate actionable elements, like its buttons. In the industrious case of Waverly, dark gray highlights a bright orange to ensure its hierarchy in a context heavy environment.

$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

Waverly’s contemporary brand attribute is expressed using Montserrat, a typeface created by Julieta Ulanovsky, resident of the Montserrat neighborhood of Buenos Aires. While only similar at first glance to a typeface like Gotham, with wide letterforms and bold outlines, Montserrat fits snugly into the contemporary phenomenon known as “brand typefaces” with a rounded friendliness that has found its way into the identity of many products.

$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

Material Design wants anyone to be able to build beautiful products, faster. Our open-source components give you everything you need to start building. Glitch makes it easy to start tinkering directly in the browser, inspiring learning through play. We encourage anyone and everyone to remix these examples to create their own buttons and their own themes, even if they have never coded before.

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

💙