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:

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

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

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

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:

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:

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

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn