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