Skip to content

Instantly share code, notes, and snippets.

@evandavis
Created September 19, 2012 14:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save evandavis/3750047 to your computer and use it in GitHub Desktop.
Save evandavis/3750047 to your computer and use it in GitHub Desktop.
box-shadow :0 -3px 1px -2px rgba(0,0,0,0.3)inset,
.btn-back {
display : block;
position:absolute;
z-index : 0;
left:50px;
top:50px;
height:30px;
width:auto;
padding: 0 10px 0 6px;
background-size : 30px 30px;
background-repeat:repeat-x;
background-position :0;
background-image : linear-gradient(
rgba(255,255,255,.6) 0%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,0) 100%
);
border-radius: 5px;
border: 1px solid #aebbc1;
border-width: 1px 1px 1px 0;
color:#8c989e;
text-shadow : -1px 1px 0px rgba(255,255,255,0.8);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;}
.btn-back:before{
position:absolute;
content : ' ';
left:-8px;
top:2px;
height : 26px;
width: 26px;
z-index : 1;
background-repeat:repeat-x;
background-size : 30px 30px;
background-position :-1px -1.5px;
background-image : linear-gradient(
225deg,
rgba(255,255,255,.6) 0%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,0) 100%
);
transform : rotateZ(-45deg);
border-top-right-radius : 9px;
border-top-left-radius :3px;
border-bottom-right-radius : 3px;
border-bottom-left-radius : 10px;
/*border-left : 1px solid rgba(255,255,255,0.4);*/
border: 1px solid #aebbc1;
border-width: 1px 0 0 1px;
/*box-shadow : 0px 1px 1px rgba(0,0,0,0.7) inset, 2px -2px 2px -3px rgba(0,0,0,0.5) inset;*/
}
.btn-back:after {
font-family : HelveticaNeue,Helvetica, Arial;
font-weight: 400;
font-size : 12px;
line-height : 30px;
text-align:center;
content: attr(title)"";
z-index: 999;
left:-1px;
top: 0px;
padding-left:3px;
position:relative;
height: 30px;
line-height:30px;
display:block;
background-repeat:repeat-x;
background-size : 30px 30px;
background-position :-1px -0.5px;
/* box-shadow :0 -3px 1px -2px rgba(0,0,0,0.3)inset,
0 4px 2px -3px rgba(255,255,255,0.8)inset;
*/
box-shadow :0 -3px 1px -2px rgba(255,255,255,0.2)inset,
0 4px 2px -3px rgba(255,255,255,0.8)inset;
background-image : linear-gradient(
rgba(255,255,255,.6) 0%,
rgba(255,255,255,.6) 50%,
rgba(255,255,255,0) 100%
);
}
.btn-back,
.btn-back:before,
.btn-back:after {
background-color: #cfdde7;
}
.btn-back:hover,
.btn-back:hover:before,
.btn-back:hover:after {
background-color: #c1d3e0;
/*border-color: #98a4a9;*/
color: #222;
}
<!-- content to be placed inside <body>…</body> -->
<div class="btn-back" id="ios-arrow-left" title="Sec. 4"></div>
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment