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
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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