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.
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 |