Creating a Simple Material Design Action Button with CSS

产品设计 2017-05-26 阅读原文

In material design, the floating action button is used to perform the main action on a page or view. Typically it is round, brightly colored and, as the name suggests, floats above the view to draw the users attention. Also, it should have some sort of animation upon focus and click events to give users visual feedback.

The material design floating action button works great with mobile apps and it will also work great for web applications, especially ones that are built to be mobile responsive.

Below, you will learn a super simple simple way to create a basic material design floating action button with CSS3 and HTML5.

The HTML

 
+
 

The HTML is simply a

element, which will be the button. You can also use a