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">
Simple css3 floating button
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
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
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.
June 2, 2019 at 3:06 pm
Wow Very helpful thank you
May 27, 2019 at 8:53 am
Great tutorial. It works. But how to add a label to the floating button with submenu?
March 13, 2019 at 9:15 am
Great tutorial. By any chance, can you show a version of the sub menu with tool-tips/Label?
July 26, 2018 at 2:30 am
Wow big thanks!
July 6, 2018 at 8:23 pm
muchas gracias, me ha servido.
Saludos
April 20, 2016 at 11:00 am
thank you!