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
Css floating button demo
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
Css floating button demo
Now i am going to add a bootstrap modal box while clicking on button.
add some more code snippet to display popup enquiry form.
Add some classes on button to open this enquiry modal box
See live demo and download full source code.
DEMO |
DOWNLOAD |
