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.
<div class="fab"> + </div>
The HTML is simply a <div> element, which will be the button. You can also use a <button> element in place of the <div>. Inside the <div> a text or icon will be added to convey the action of the button. In this example, a plus sign is used to indication an adding action. The class attribute is set to the “fab” class , which will render the <div> into a material design floating action button. More on this in the CSS section.
box-shadow: 0 6px 10px 0 #666;
transition: all 0.1s ease-in-out;
box-shadow: 0 6px 14px 0 #666;
The CSS is where all the magic happens. Inside the “fab” class, starting on line 2, we did the following:
- set the height and width of the div (lines 3 and 4)
- colored it a bright red (line 5)
- made it into a circle by setting the “border-radius” to 50% (line 6)
- added a box shadow (on line 7) to create a floating effect.
- and, lastly, added transition for smooth animation.
Lines 10 to 13 set the properties of the text inside the button.
The next 3 lines (15 -17) are used to position the button at the bottom right corner of the view. The button will “stick” to that location as a fixed position is applied.
Finally, starting on line 20, we have the fab class with the hover selector. When the user hovers their mouse over the button, the box shadow will expand slightly and the button will increase in size giving a rising effect.
That is it. Try in out in the live demo below.