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

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


Include fontawesome libraries on page to use icon on menu.

<link rel='stylesheet prefetch' href=''>


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>


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, .customBox:checked ~ .two:hover, .customBox:checked ~ .three:hover {
  opacity: .9;

See live demo and download source code.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.