Create Material Design Like Radial FAB (Floating Action Button) Menu in Pure CSS

by Posted on

In this post I am going to share useful code snippet in css written by Dhanish to create material design like floating action button menu. With the help of this simple code snippet you can add FAB menu that pops up a group of menu items around the clicked button. This script doesn’t required any thirst party plugin without any javascript.

Creating Material Design Like Floating Action Menu in Pure CSS

Libraries

Include fontawesome libraries on page to use icon on menu.

<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.6/css/all.css'>



HTML

Creating the floating action menu that pops up a group of menu items around the clicked button.

<input id="customBox" class="customBox" type="checkbox" />
  <label for="customBox"></label>
 
  <div class="one fas fa-pen-square"></div>
  <div class="two fas fa-star"></div>
  <div class="three fas fa-share"></div>



CSS

Add CSS on page to make material design like floating action menu.

.customBox {
  display: none;
}
 
.customBox + label {
  cursor: pointer;
  position: absolute;
  right: 1em; bottom: 1em;
  background-color: tomato;
  height: var(--l); width: var(--l);
  border-radius: 50%;
  z-index: 2;
}
 
.customBox + label:before, .customBox + label:after {
  position: absolute;
  content: '';
  height: calc(var(--l) / 2 );
  width: .25em;
  background-color: #fff;
  top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  border-radius: .5em;
  transition: all .25s;
}
 
.customBox + label:before {
  height: calc(var(--l) / 2 );
  width: .25em;
 }
 
.customBox + label:after {
  width: calc(var(--l) / 2 );
  height: .25em;
 }
 
.customBox:checked + label:before { transform: rotatez(-45deg); }
 
.customBox:checked + label:after { transform: rotatez(-45deg); }
 
.one, .two, .three {
  cursor: pointer;
  position: absolute;
  right: 1em; bottom: 1em;
  padding: 1em;
  width: 1em; height: 1em;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  transform: rotateZ(90deg);
  font-size: 1em;
  color: #fff;
  transition-property: all;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 
.customBox:checked ~ .one, .customBox:checked ~ .two, .customBox:checked ~ .three  {
  opacity: 1;
}
 
.customBox:checked ~ .one {
  background-color: purple;
  transform: translateX(-5em);
  transition-delay: .2s;
}
 
.customBox:checked ~ .two {
  background-color: slateblue;
  transform: translateX(-3.5em) translateY(-3.5em);
  transition-delay: .1s;
}
 
.customBox:checked ~ .three {
  background-color: mediumorchid;
  transform: translateY(-5em);
}
 
.customBox:checked ~.one:hover, .customBox:checked ~ .two:hover, .customBox:checked ~ .three:hover {
  opacity: .9;
}

See live demo and download source code.

DEMO | DOWNLOAD



Published by admin