How to Create CSS Floating Button

Today in this article we will learn how to create CSS floating Button, Floating Buttons always show above our page its position always fixed.

Css3 Floating Button will work properly on small devices it will be completely responsive. For icons we will use FontAwesome

Simple Floating Button

<a href="#" class="float_but">
    <i class="fa fa-home my-float_bt"></i>
 </a>

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

.my-float_bt{
	margin-top:17px;
	font-size:25px;
}

Css3 Floating Button With Submenu

 <a href="#" class="float" id="menu-share">
       <i class="fa fa-home 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>

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

.label-text{
	color:#333;
	background:rgba(51,51,51,1);
	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:#f60;
	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:#333;
	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:-100px}
    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);}
}