CSS3 floating button material design tutorial

With a power of CSS3 animation, it is possible to implement CSS3 floating button only with CSS and without the use of javascript or jquery library. This tutorial explains 3 different versions of the CSS3 floating button.

The CSS3 floating button is fully responsive and works great with smaller devices like mobile and tablets.

Make sure to add below tag to your page head to scale buttons perfectly in mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

For icons, I used FontAwesome icon font. In below examples, you like to see <i> tag with some default classes like fa,fa-plus etc. which tells FontAwesome to load specified icon.

For example, the class name fa-plus tells font awesome to load google plus icon into <i> tag.

If you don’t know what icon font is? then you can refer this article using fontawesome icons for all icons and their usage

To use FontAwesome icon set, you have to add below tag in your page head.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Download The Code From Github

Simple css3 floating button

Live Demo

HTML

<a href="#" class="float">
<i class="fa fa-plus my-float"></i>
</a>

CSS

*{padding:0;margin:0;}

body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	background-color:#CCC;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	margin-top:22px;
}

css3 floating button with label

Live Demo

HTML

<a href="#" class="float">
<i class="fa fa-envelope my-float"></i>
</a>
<div class="label-container">
<div class="label-text">Feedback</div>
<i class="fa fa-play label-arrow"></i>
</div>

CSS

*{padding:0;margin:0;}

body{
	font-family:Verdana, Geneva, sans-serif;
	background-color:#CCC;
	font-size:12px;
}

.label-container{
	position:fixed;
	bottom:48px;
	right:105px;
	display:table;
	visibility: hidden;
}

.label-text{
	color:#FFF;
	background:rgba(51,51,51,0.5);
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	border-radius:3px;
}

.label-arrow{
	display:table-cell;
	vertical-align:middle;
	color:#333;
	opacity:0.5;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#06C;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	font-size:24px;
	margin-top:18px;
}

a.float + div.label-container {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

a.float:hover + div.label-container{
  visibility: visible;
  opacity: 1;
}

css3 floating button with submenu

Live Demo

HTML

<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li><a href="#">
<i class="fa fa-facebook my-float"></i>
</a></li>
<li><a href="#">
<i class="fa fa-google-plus my-float"></i>
</a></li>
<li><a href="#">
<i class="fa fa-twitter my-float"></i>
</a></li>
</ul>

CSS

*{padding:0;margin:0;}

body{
	font-family:Verdana, Geneva, sans-serif;
	background-color:#CCC;
	font-size:12px;
}

.label-container{
	position:fixed;
	bottom:48px;
	right:105px;
	display:table;
	visibility: hidden;
}

.label-text{
	color:#FFF;
	background:rgba(51,51,51,0.5);
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	border-radius:3px;
}

.label-arrow{
	display:table-cell;
	vertical-align:middle;
	color:#333;
	opacity:0.5;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#F33;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	z-index:1000;
	animation: bot-to-top 2s ease-out;
}

ul{
	position:fixed;
	right:40px;
	padding-bottom:20px;
	bottom:80px;
	z-index:100;
}

ul li{
	list-style:none;
	margin-bottom:10px;
}

ul li a{
	background-color:#F33;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	width:60px;
	height:60px;
	display:block;
}

ul:hover{
	visibility:visible!important;
	opacity:1!important;
}


.my-float{
	font-size:24px;
	margin-top:18px;
}

a#menu-share + ul{
  visibility: hidden;
}

a#menu-share:hover + ul{
  visibility: visible;
  animation: scale-in 0.5s;
}

a#menu-share i{
	animation: rotate-in 0.5s;
}

a#menu-share:hover > i{
	animation: rotate-out 0.5s;
}

@keyframes bot-to-top {
    0%   {bottom:-40px}
    50%  {bottom:40px}
}

@keyframes scale-in {
    from {transform: scale(0);opacity: 0;}
    to {transform: scale(1);opacity: 1;}
}

@keyframes rotate-in {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes rotate-out {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}

Finally, Why css3 floating button?

Today, the most of modern browser support css3 and html5.
Using a library like jquery for animation puts an extra burden onto your website in terms of speed.