Floating buttons

      No Comments on Floating buttons

Floating buttons with CSS hover effects -animations in CSS only


Floating buttons

  • Floating buttons -CSS

    HTML

    <div class="well scanfcode_fl">
     <h2>Floating buttons</h2>
     <li><button class='btn btn_fl1'>Social</button></li>
     <li><button class='btn btn_fl3'>Social</button></li>
     <li><button class='btn btn_fl2'>Social</button></li>
     <li><button class='btn btn_fl4'>Social</button></li>
    </div>
    

    CSS

    
    /* container divison */
    .scanfcode_fl
    {
     position:relative;
     overflow:hidden;
    }
    
    .scanfcode_fl li
    {
     margin:40px 0px;
    }
    
    /* CSS for buttons */
    .scanfcode_fl button
    {
      border-radius:20px;
      width:160px;
      height:50px;
      font-size:18px;
      position:absolute;
      left:-120px;
      color:#fff;
      transition:ease 0.3s;
    }
    
    /* styling buttons individually for different colors */
    .btn_fl1
    {
      border:solid 2px #003399;
      background-color:#e6eeff;
    }
    .btn_fl1:hover
    {
      background-color:#003399; left:-20px;
    }
    .btn_fl2
    {
     border:solid 2px #00b359;background-color:#e6fff2;
    }
    .btn_fl2:hover
    {
      background-color:#00b359; left:-20px;
    }
    .btn_fl3
    {
     border:solid 2px #ff0066;background-color:#ffe6f0;
    }
    .btn_fl3:hover
    {
      background-color:#ff0066; left:-20px;
    }
    .btn_fl4
    {
     border:solid 2px #ff6600;background-color:#fff0e6;
    }
    .btn_fl4:hover
    {
      background-color:#ff6600; left:-20px;
    }
    

    Leave a Reply

    Your email address will not be published. Required fields are marked *