Pure CSS Google Inspired Floating Action Button

Author
In CSS Animation, CSS Tutorial May 1, 2017
Google Floating Action Button

Do you want to build an action button just what similar to Google? Here we have inspired version using pure CSS only.

The action button works with one click function and shows up the list of menus.

The buttons like this save your web page space and attract the user to click to see more information or more links.

The Google use the button on the different Android application, Google Plus and their website.

Let’s have a look the HTML where we have a container, a button (checkbox and label) and navigation links.

<div class="container"> <input type="checkbox" id="toggle" /> <label class="button" for="toggle"></label> <nav class="nav"> <a href="http://sashatran.com" target="_blank">About</a> <a href="http://codepen.io/sashatran/pens/public/" target="_blank">Home</a> <a href="https://www.linkedin.com/in/sasha-tran-23498989/" target="_blank">Hire Me</a> <a href="https://www.youtube.com/channel/UCCATAa8MWoBuH-sR_Jlx29A" target="_blank">Subscribe</a> </nav> </div> 

The technique is simple to create the action button to hide the checkbox and make the label as button then perform the action using the CSS :checked

#toggle { display: none; } .button { z-index: 999; width: 43px; height: 43px; background: #F28482; border-radius: 100%; transition: all 0.5s ease-in-out; box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3); cursor: pointer; } .button:before { position: absolute; top: 20px; left: 9px; content: ''; width: 25px; height: 2px; background: #FFF; transform: rotate(90deg); } .button:after { position: absolute; top: 20px; left: 9px; content: ''; width: 25px; height: 2px; background: #FFF; } #toggle:checked ~ .nav { opacity: 1; transform: translateY(10%); } #toggle:checked ~ .button { transform: rotate(135deg); box-shadow: 0 0 0 0 transparent; } 

To style the links of the menu, you can use the different styles, animation, and transforms.

.nav { transform: translateY(-10%); opacity: 0; top: 13px; left: -50px; transition: all 0.5s ease-in-out; background: #FFF; width: 150px; border-radius: 5px; transform: translateY(0%); box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1); } .nav a { text-align: center; display: block; margin: 20px 0; color: #F28482; text-decoration: none; font-family: 'Roboto', sans-serif; text-transform: uppercase; letter-spacing: 2px; } 

Have a look the codepen demo here.

See the Pen Google Inspired Floating Action Button by Sasha (@sashatran) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *