Skip to content

Instantly share code, notes, and snippets.

@james-see

james-see/CSS3 IMAGELESS FLOATING FEEDBACK BUTTON.css

Last active April 3, 2017 19:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save james-see/018e0762dfb8613bf40827af723280c6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save james-see/018e0762dfb8613bf40827af723280c6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. J C revised this gist Apr 3, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion CSS3 IMAGELESS FLOATING FEEDBACK BUTTON.css
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    height: 104px;
    width: 104px;
    position: fixed;
    top: 40%;
    top: 90%;
    z-index: 999;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  2. @msrkc msrkc created this gist May 11, 2015.
    40 changes: 40 additions & 0 deletions CSS3 IMAGELESS FLOATING FEEDBACK BUTTON.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    // html

    <div id="feedback">
    <a href="/feedback_url/">feedback</a>
    </div>

    // css

    #feedback {
    height: 104px;
    width: 104px;
    position: fixed;
    top: 40%;
    z-index: 999;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    #feedback a {
    display: block;
    background: #f00;
    height: 15px;
    width: 70px;
    padding: 8px 16px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    border-bottom: solid 1px #333;
    border-left: solid 1px #333;
    border-right: solid 1px #fff;
    }

    #feedback a:hover {
    background: #06c;
    }