Skip to content

Instantly share code, notes, and snippets.

@hzlzh
Created August 8, 2012 16:16
Show Gist options
  • Save hzlzh/3296306 to your computer and use it in GitHub Desktop.
Save hzlzh/3296306 to your computer and use it in GitHub Desktop.
CSS3 Feedback Button
<div class="feedback-btn">
<a class="en-us" title="Feedback" target="_blank" href="#">Feedback</a>
<br />
<br />
<a class="zh-cn" title="用户反馈" target="_blank" href="#"> 用 户 反 馈 </a>
</div>​
/*
@name: CSS3 Feedback Button
@description: Both EN&ZH feedback button style and animation with CSS3.
@author: hzlzh <hzlzh.dev@gmail.com>
@link: https://gist.github.com/3296306
@demo: http://jsbin.com/css3-feedback-button/latest/
*/
.feedback-btn {
display: block;
left: 0;
position: fixed;
top: 100px;
}
.feedback-btn a.en-us {
display:block;
border-radius: 0 0 4px 4px;
border: 1px solid #75a3d;
background-color: #f4f4f4;
color: #bbb;
text-shadow: 0 1px 1px #fff;
font-size: 14px;
font-weight: normal;
line-height: 16px;
margin-left: -30px;
padding: 20px 10px 10px 16px;
text-decoration: none;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.feedback-btn a.en-us:hover {
color: #F4F4F4;
margin-left: -24px;
text-decoration: none;
text-shadow: 0 1px 1px #333333;
border: 1px solid #75a3d;
background-color: #6093cc; /* Old browsers */
background: -moz-linear-gradient(left, #6093cc 0%, #84b6eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6093cc), color-stop(100%,#84b6eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* IE10+ */
background: linear-gradient(to right, #6093cc 0%,#84b6eb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6093cc', endColorstr='#84b6eb',GradientType=1 ); /* IE6-9 */
}
.feedback-btn a.zh-cn {
border-radius: 0 4px 4px 0;
border: 1px solid #75a3d;
background-color: #f4f4f4;
color: #bbb;
text-shadow: 0 1px 1px #fff;
display: inline-block;
font-size: 14px;
font-weight: normal;
letter-spacing: 32px;
line-height: 16px;
margin-left: -6px;
padding: 10px 10px 10px 16px;
text-decoration: none;
width: 1em;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
.feedback-btn a.zh-cn:hover {
text-decoration: none;
margin-left: 0;
border: 1px solid #75a3d;
color: #f4f4f4;
text-shadow: 0 1px 1px #333;
background-color: #6093cc; /* Old browsers */
background: -moz-linear-gradient(left, #6093cc 0%, #84b6eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6093cc), color-stop(100%,#84b6eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #6093cc 0%,#84b6eb 100%); /* IE10+ */
background: linear-gradient(to right, #6093cc 0%,#84b6eb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6093cc', endColorstr='#84b6eb',GradientType=1 ); /* IE6-9 */
}
@anbarasusoft
Copy link

asaas
ass
as
sa
s

@jeremyclof1990
Copy link

If you are too lazy to code. You may try BugRem.com then sit and relax.

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