Skip to content

Instantly share code, notes, and snippets.

@UNIcodeX

UNIcodeX/floatingCSSButtons.html

Created October 16, 2020 13:12
Show Gist options
  • Save UNIcodeX/1a8ad38feed8447efd91f9991ed5aef0 to your computer and use it in GitHub Desktop.
Save UNIcodeX/1a8ad38feed8447efd91f9991ed5aef0 to your computer and use it in GitHub Desktop.
Download ZIP
Floating fixed position CSS Buttons
Raw
floatingCSSButtons.html
<html>
<style>
.floating-button {
z-index: 1000;
position: fixed;
border-radius: 33px;
padding: 20px;
text-decoration: none;
}
.floating-button:hover {
text-decoration: none;
}
.floating-button.right {
bottom: 2rem;
right: 2rem;
}
.floating-button.left {
bottom: 2rem;
left: 2rem;
width: auto;
right: auto;
height: auto;
}
.high-contrast {
background-color: white;
border:3px solid black;
color: black;
font-weight: bold;
}
.high-contrast-inverted {
background-color: black;
border:3px solid white;
color: white;
font-weight: bold;
}
.blue {
background-color: blue;
color: white;
font-weight: bold;
}
</style>
<body style="height:200vh;">
<a class="floating-button left high-contrast" href="">
<span>Button One</span>
</a>
<a class="floating-button right high-contrast-inverted" href="">
<span>Button Two</span>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment