Multifunctional Material Design button in pure CSS

Buttons are simple, yet important user interface elements that are used to trigger actions or events. They are one of the main ways of interacting with a website and can represent any number of events including purchase, confirming an action, linking to another page, social sharing, submitting, adding or changing the state of another element on the page. Google’s Material Design guidelines suggest three types of main buttons:

components_buttons_usage_main

Floating action button: a circular button made of paper that lifts and emits ink reactions on press.
components_buttons_usage1

Raised button: a typically rectangular button made of paper that lifts and emits ink reactions on press.
components_buttons_usage2

Flat button: a button made of ink that emits ink reactions on press but does not lift.

components_buttons_usage3

Also Material Design guidelines suggest, that button color should be in accordance with your app’s or website’s color theme. These guidelines works pretty well designing buttons for mobile applications. What about websites or web applications? It’s quite clear, that in some cases only 3 button designs are not sufficient creating large web applications or static websites. You might end up in situations, where buttons should be multi-functional and contain more than a single action. Designer Anthony Collurafici found a creative way to combine multiple actions into a single Material Design button:

Material-Design-add-button

Multi-action button in CSS

See the Pen Add Button by Anthony Collurafici (@CSS3fx) on CodePen.

Anthony was inspired by Sergey Valiukh and his initial concept design of this button:

open-uri20150304-11-1xavdce

#button #concept #application #app #webdesign #example #inspiration #materialdesign

One response on “Multifunctional Material Design button in pure CSS

  1. Paolo Cappuccini

    how is far to be used with Angular and its real Material Design components?

Leave a Reply