Creating a Simple Material Design Action Button with CSS

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 <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

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

2 responses on “Creating a Simple Material Design Action Button with CSS

  1. Vicky

    Hello Admin!
    Such a great and informative post indeed on material design, I really appreciate it!
    Keep updating stuffs like this.

  2. ledgescha

    Hello, thanks for sharing such a nice information on creating simple material design action button , i made same from this tutorial

Leave a Reply