Summary

This page has examples of material design. 'Material design' is a concept developed by Google which attempts to incorporate the interaction style of real world elements into web interface design. While Google attempts to use cutting edge browser technologies to accomplish this purpose, below are examples of backwards compatible elements which use CSS, THML and Javascript, which work in most browsers.

The elements below are a collection from codepen.oi, which were originally developed by other developers.

Navigation and Responsive Page Layout

See the Pen Material Design Introduction by Reece George (@reecegeorge) on CodePen.

Alternative Navigation

See the Pen PURE CSS MATERIAL DESIGN MENU by Reece George (@reecegeorge) on CodePen.

Another Navigation Bar

See the Pen Material Design Menu Toggle by Reece George (@reecegeorge) on CodePen.

Hamburger Navigation

See the Pen Material Design Hamburger by Reece George (@reecegeorge) on CodePen.

Mobile First Navigation

See the Pen MATERIAL DESIGN MENU MOBILE by Reece George (@reecegeorge) on CodePen.

Header Panel

See the Pen Material Design Header Panel by Reece George (@reecegeorge) on CodePen.

Home Page Tiles

See the Pen Material Design (CSS-based) - Tiles by Reece George (@reecegeorge) on CodePen.

Animated Button

See the Pen Material Design Button by Reece George (@reecegeorge) on CodePen.

Flat Animated Buttons

See the Pen Material Design Polymer Flat buttons by Reece George (@reecegeorge) on CodePen.

Another Button

See the Pen Material Design Inspired Button by Reece George (@reecegeorge) on CodePen.

Animated Page Elements

See the Pen Google Material Design by Reece George (@reecegeorge) on CodePen.

Call-out Styles

See the Pen Polymer message styles by Reece George (@reecegeorge) on CodePen.

Form Input

See the Pen Google Material Design Input Boxes by Reece George (@reecegeorge) on CodePen.

Animated Hamburger Icon

See the Pen CSS MATERIAL DESIGN BUTTON by Reece George (@reecegeorge) on CodePen.

Spinner

See the Pen Material Design Spinner by Reece George (@reecegeorge) on CodePen.

Shadows

See the Pen Material Design Shadows CSS by Reece George (@reecegeorge) on CodePen.

Paper Shadows

See the Pen paper-elements-shadow by Reece George (@reecegeorge) on CodePen.

Checkbox Design

See the Pen Checkbox - Material design by Reece George (@reecegeorge) on CodePen.

Icons

See the Pen Google Polymer Icons by Reece George (@reecegeorge) on CodePen.

Social Web Icons

See the Pen Polymer - Social Nav - Web Component by Reece George (@reecegeorge) on CodePen.

Color Picker

See the Pen Fullscreen Color Picker by Reece George (@reecegeorge) on CodePen.