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
Raw
CSS3 IMAGELESS FLOATING FEEDBACK BUTTON.css
// html
<div id="feedback">
<a href="/feedback_url/">feedback</a>
</div>
// css
#feedback {
height: 104px;
width: 104px;
position: fixed;
top: 90%;
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;
}
@james-see
Copy link
Author

james-see commented Apr 3, 2017

updated to have the button be at 90% down from top of screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment