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
|
1 2 3 |
<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.
The CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.fab { width: 70px; height: 70px; background-color: red; border-radius: 50%; box-shadow: 0 6px 10px 0 #666; transition: all 0.1s ease-in-out; font-size: 50px; color: white; text-align: center; line-height: 70px; position: fixed; right: 50px; bottom: 50px; } .fab:hover { box-shadow: 0 6px 14px 0 #666; transform: scale(1.05); } |
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.
The Result
See the Pen Simple Material Design Floating Action Button by WebDevUnlimited (@WebDevUnlimited) on CodePen.dark
#materialdesign #FAB #button #code #tutorial #CSS #HTML
Hello Admin!
Such a great and informative post indeed on material design, I really appreciate it!
Keep updating stuffs like this.
Hello, thanks for sharing such a nice information on creating simple material design action button , i made same from this tutorial
Hello, Thanks for this great information, loved it 🙂
Great post! Action buttons are key to your website user experience.I’m going to give it a try with CSS3. Thanks for the information and demo.
Very useful information about material design action button, Great!!
hello great article! i love it
Very great post with excellent and insightful information. Thanks for sharing.
Thanks for the great article; I like this floating animation button effect using the CSS3 and HTML5. It is really impressive to see the floating button with CSS and without any using the javascript or jquery library. Because jquery effect more on the website speed as compared to CSS.
wow very good info. thank you for your great information CSS3 and HTML 5 .
It’s the bomb. I love it. Thanks for this post
Thanks for the great article; I like this floating animation button effect using the CSS3 and HTML5. It is really impressive to see the floating button with CSS and without any using the javascript or jquery library. Because jquery effect more on the website speed as compared to CSS.
Useful Blog for the Website Design Thank You for Sharing this Information
Wow, this idea is awesome!