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

Revisions

  1. UNIcodeX created this gist Oct 16, 2020.
    56 changes: 56 additions & 0 deletions floatingCSSButtons.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <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>