Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 24, 2012 17:23
Show Gist options
  • Save xav76/3947465 to your computer and use it in GitHub Desktop.
Save xav76/3947465 to your computer and use it in GitHub Desktop.
A CodePen by David Pedersen. iOS style button
<a href="#" class="back-button">Tilbage</a>
var btn = $('a.back-button'),
text = btn.text();
btn.attr('data-text', text);
* {
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 50px; }
a {
text-decoration: none; }
a.back-button {
position: relative;
height: 29px;
width: 54px;
display: inline-block;
padding: 0 7px 0 5px;
background: -webkit-radial-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%) center 19px no-repeat, -webkit-linear-gradient(#a76637 44%, #522403 56%);
color: white;
border-top: 1px solid #4c2f1a;
border-bottom: 1px solid #522301;
box-shadow: inset 0 1px 0 #975d32;
text-shadow: 0 -1px 0 black;
font-family: sans-serif;
line-height: 29px;
font-size: 12px;
font-weight: bold;
text-indent: -9999px;
border-radius: 5px; }
a.back-button:after {
display: block;
top: 0;
bottom: 0;
right: 8px;
position: absolute;
text-indent: 0;
content: attr(data-text); }
a.back-button:before {
position: absolute;
top: 4px;
left: -7.6px;
display: block;
width: 19px;
height: 19px;
background: -webkit-linear-gradient(-135deg, #a76637 44%, #522403 56%);
box-shadow: inset 1px 0 0 #522301, inset 0 1px 0 #4c2f1a;
content: "";
-webkit-transform: rotate(-45deg); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment