Skip to content

Instantly share code, notes, and snippets.

@haithamsboui

haithamsboui/CSS Floating buttons with container

Created April 29, 2017 19:55
Show Gist options
  • Save haithamsboui/b47626497b5044e7846eab1906cfc414 to your computer and use it in GitHub Desktop.
Save haithamsboui/b47626497b5044e7846eab1906cfc414 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Floating buttons with container
Raw
CSS Floating buttons with container
CSS :
.btn-floating-container {
right: 50px;
bottom: 50px;
position: fixed;
}
.btn-floating {
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(245, 245, 245, 0.075);
text-align: center;
padding: 0px;
font-size: 24px;
}
HTML :
<div class="btn-floating-container">
<button class="btn-floating btn btn-primary btn-medium"><i class="fa fa-bullseye " aria-hidden="true"></i>
</button>
<button class="btn-floating btn btn-primary btn-medium"><i class="fa fa-bullseye " aria-hidden="true"></i>
</button>
<button class="btn-floating btn btn-primary btn-medium"><i class="fa fa-bullseye " aria-hidden="true"></i>
</button>
</div>
Other classes used in this example are related to bootstrap and fontawesome
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
OSZAR »