how to add a floating icons using html and css?

how to add floating icons such as Facebook and twitter etc for blog or web page?

Senior Evident Asked on October 27, 2017 in Web Development.
Add Comment
  • 1 Answer(s)

      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 css3 floating button.

      Our css3 floating button is fully responsive and works great in 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

      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

      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

      css3 floating button material design

      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 library like jquery for animation puts extra burden onto your website in terms of speed.

      courtesy: androidcss.com

      Senior Evident Answered on October 27, 2017.
      Add Comment

      Your Answer

      By posting your answer, you agree to the privacy policy and terms of service.