CSS FLOATING BUTTON | USING HTML AND CSS.

 CSS FLOATING BUTTON | USING HTML AND CSS.




CSS FLOATING BUTTON | USING HTML AND CSS.

Hello...Welcome to codewithrandom today I am showing how to create CSS Floating Button using Html and css.
Before that you should know that what is floating button.It is a small device which work properly and its completely responsive.Its is a circular shape.

Code:-


HTML CODE:-

In this html code we want to make button icon that divided into 4  part i.e home setting logout and help as show in code.If you want to add any icon you can add. 
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"  
    rel="stylesheet">  
 <div class="container">  
  <div class="btn-group">  
       <span></span>  
       <button class="btn">  
        <i class="material-icons md-48">home</i>  
       </button>  
           <button class="btn">  
            <i class="material-icons">settings</i>  
           </button>  
           <button class="btn">  
            <i class="material-icons">logout</i>  
           </button>  
           <button class="btn">  
            <i class="material-icons">help</i>  
           </button>  
      </div>  
 </div>  

HTML OUTPUT:-

CSS CODE:-

In css code we want to design html code with background height weight and depending upon your need you can give height,weight,background etc to your floating button and also you use different colour for floating button.

 *{  
  margin:0;  
 }  
 body{  
  background:#fff;  
 }  
 .container {  
  height: 200px;  
  width: 300px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
 }  
 .btn-group {  
  height: 160px;  
  width: 160px;  
  border-radius:160px;  
  transform: scale(0.5);  
  font-family: calibri;  
  position: absolute;  
  cursor: pointer;  
  transition: all 0.5s cubic-bezier(0.83, -0.24, 0.24, 1.31);  
  background-color: #fff;  
  vertical-align: middle;  
 }  
 .btn {  
  height: 80px;  
  width: 80px;  
  float: left;  
  font-size: 40px;  
  line-height:80px;  
  border: none;  
  background-color: #2196F3;  
  color: #2196F3;  
  transition: all 0.5s cubic-bezier(0.83, -0.24, 0.24, 1.31), background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;  
  cursor: pointer;  
  display:flex;  
  align-items:center;  
  justify-content:center;  
 }  
 .btn:hover {  
  background-color: #64B5F6;  
  box-shadow:inset 0 0 10px rgba(0,0,0,0.15);  
 }  
 .btn-group > span {  
  height:60px;  
  width:60px;  
  margin:50px 50px;  
  position:absolute;  
 }  
 .btn-group > span::before, .btn-group > span::after{  
  content:'';  
  background-color:#fff;  
  position:absolute;  
  border-radius:10px;  
 }  
 .btn-group > span::before{  
  width:10px;  
  height:100%;  
  margin:0 25px;  
 }  
 .btn-group > span::after{  
  width:100%;  
  height:10px;  
  margin:25px 0;  
 }  
 .btn-group:hover {  
  transform: scale(0.85) rotate(45deg);  
  cursor:default;  
 }  
 .btn-group:hover > span {  
  opacity: 0;  
 }  
 .btn-group:hover > .btn {  
  border-radius: 100%;  
  color: #fff;  
  transform: rotate(-45deg);  
 }  
 .btn:nth-child(2){  
  border-radius: 80px 0 0 0;  
 }  
 .btn:nth-child(3){  
  border-radius: 0 80px 0 0;  
 }  
 .btn:nth-child(4){  
  border-radius: 0 0 0 80px;  
 }  
 .btn:nth-child(5){  
  border-radius: 0 0 80px 0;  
 }  
 .btn-group:hover > .btn:nth-child(2) {  
  margin: -5px 5px 5px -5px;  
 }  
 .btn-group:hover > .btn:nth-child(3) {  
  margin: -5px -5px 5px 5px;  
 }  
 .btn-group:hover > .btn:nth-child(4) {  
  margin: 5px 5px -5px -5px;  
 }  
 .btn-group:hover > .btn:nth-child(5) {  
  margin: 5px -5px -5px 5px;  
 }  
 .material-icons{  
  font-size:36px !important;  
 }  

CSS OUTPUT(FINAL OUTPUT):-





Now you have sucessfully created a floating button. If you follow all instruction in this article , you should have a page that look similar to the VIDEO that is mentioned in  CSS FINAL OUTPUT . If you have any doubt or question comment down below . Hopefully you may like it !!

Written by :- SAYALI KHARAT

Check out more.....






Post a Comment

Previous Post Next Post