Create simple left and right floating button using CSS

This is very simple tutorial for creating simple left and right floating button using CSS, Sometime we required to add fixed left or right feedback or enquiry button on some pages. So that when ever visitor will click on that button, A quick enquiry form will be display and visitor can get in touch with us.
floating-button
Here is the code.

Here i am using bootstrap button, Note: before using bootstrap button don’t forget to include bootstarp strap js and css file on the page.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Css floating button demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Left float button -->
<button type="button" class="btn btn-danger" ><b>Send Enquiry</b></button>
 
<!-- Right Float Button -->
<button type="button" class="btn btn-danger" ><b>Send Enquiry</b></button>
</body>
</html>





Add css to create left and right float button

CSS

.left,
.right {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 2.5em;
  margin: auto;
  background: red;
}
 
.left {
  left: 0;
  -webkit-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
       -o-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
     -moz-transform: rotate(-90deg) translate(-50%, 50%);
      -ms-transform: rotate(-90deg) translate(-50%, 50%);
       -o-transform: rotate(-90deg) translate(-50%, 50%);
          transform: rotate(-90deg) translate(-50%, 50%);
}
 
.right {
   right: 0;
   -webkit-transform-origin: 100% 50%;
      -moz-transform-origin: 100% 50%;
       -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
           transform-origin: 100% 50%;
   -webkit-transform: rotate(90deg) translate(50%, 50%);
      -moz-transform: rotate(90deg) translate(50%, 50%);
       -ms-transform: rotate(90deg) translate(50%, 50%);
        -o-transform: rotate(90deg) translate(50%, 50%);
           transform: rotate(90deg) translate(50%, 50%);
}

After that your final index.html file will be, Don’t forget to add your left and right class on buttons.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Css floating button demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .left,
.right {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 2.5em;
  margin: auto;
  background: red;
}
 
.left {
  left: 0;
  -webkit-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
       -o-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: rotate(-90deg) translate(-50%, 50%);
     -moz-transform: rotate(-90deg) translate(-50%, 50%);
      -ms-transform: rotate(-90deg) translate(-50%, 50%);
       -o-transform: rotate(-90deg) translate(-50%, 50%);
          transform: rotate(-90deg) translate(-50%, 50%);
}
 
.right {
   right: 0;
   -webkit-transform-origin: 100% 50%;
      -moz-transform-origin: 100% 50%;
       -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
           transform-origin: 100% 50%;
   -webkit-transform: rotate(90deg) translate(50%, 50%);
      -moz-transform: rotate(90deg) translate(50%, 50%);
       -ms-transform: rotate(90deg) translate(50%, 50%);
        -o-transform: rotate(90deg) translate(50%, 50%);
           transform: rotate(90deg) translate(50%, 50%);
}
 
  </style>
</head>
<body>
<!-- Left float button -->
<button type="button" class="btn btn-danger left"><b>Send Enquiry</b></button>
 
<!-- Right Float Button -->
<button type="button" class="btn btn-danger right" ><b>Send Enquiry</b></button>
</body>
</html>




Now i am going to add a bootstrap modal box while clicking on button.

add some more code snippet to display popup enquiry form.

<div class="modal fade enquiry" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
 
    <div class="container" style="width:80%; margin:0 auto;">
 
    		<h3 class="tittle" style="text-align:center">Send Enquiry</h3>
  <form>
   <div class="form-group">
    <label>Full Name</label>
    <input type="text" class="form-control" placeholder="Name">
  </div>
  <div class="form-group">
    <label >Email address</label>
    <input type="email" class="form-control"  placeholder="Email">
  </div>
 
   <div class="form-group">
    <label >Message</label>
    <textarea class="form-control" placeholder="Message"></textarea>
  </div>
 
 
  <button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-info" data-dismiss="modal" >Close</button>
  <br/>
  <br/>
</form>
    </div>
   </div>
  </div>
 </div>

Add some classes on button to open this enquiry modal box

<!-- Left float button -->
<button type="button" class="btn btn-danger left" data-toggle="modal" data-target=".enquiry"><b>Send Enquiry</b></button>
 
<!-- Right Float Button -->
<button type="button" class="btn btn-danger right" data-toggle="modal" data-target=".enquiry"><b>Send Enquiry</b></button>

See live demo and download full source code.

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public note book for more useful stuff

3 Replies to “Create simple left and right floating button using CSS”

  1. Hello Rohit,

    Thank you very much for this helpful tutorial. I am wondering how to make an animated button like this. Here is an example: – a blue phone floating button is something I would like to have on my website. Is there a simple way to arrange it?

    Many thanks for what you are doing!

  2. रोहित जी हिंदी में भी सहायता कीजिए।

    अधिकांश उपयोगकर्ता हिंदी भाषी ही हैं।

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.