Skip to content

Instantly share code, notes, and snippets.

@jsnkuhn
Created May 15, 2012 16:10
Show Gist options
  • Save jsnkuhn/2702939 to your computer and use it in GitHub Desktop.
Save jsnkuhn/2702939 to your computer and use it in GitHub Desktop.
Power buttons
/** Power buttons
*
*/
body {background:#ccc;}
ul{
width:50px;
margin-left:30px;
margin-top:5em;
padding-top:.7em;
background:#ddd;
background-image:linear-gradient(to right,#ddd,#ccc);
border:1px solid;
border-color:#bbb #ddd #ddd #bbb;
box-shadow:inset 1px 1px 2px rgba(0,0,0,.3);
border-radius:3px;
list-style-type:none;
overflow:visible;
}
a{
display:block;
width:110px;
background:#ccc;
background-image:linear-gradient(rgba(51,51,51,.1),rgba(255,255,255,.3)),linear-gradient(#eee,#ccc);
background-size:8px,102%;
background-position:right;
background-repeat:no-repeat;
border:1px solid;
border-color:#eee #ccc #ccc #eee;
box-shadow:0 0 3px rgba(0,0,0,.5),inset 1px 1px 1px rgba(255,255,255,.8);
border-radius:2px;
margin-left:-50px;
margin-bottom:.7em;
text-align:center;
text-decoration:none;
color:#000;
}
a:hover{
color:#800000;
text-shadow:0 0 5px #fff;
box-shadow:0 0 5px rgba(0,0,0,.6);
}
a:active{
background:#bbb;
background-image:linear-gradient(rgba(51,51,51,.1),rgba(51,51,51,.3)),linear-gradient(#eee,#bbb);
background-size:8px,102%;
background-position:right;
background-repeat:no-repeat;
border:1px solid;
border-color:#ddd #bbb #bbb #ddd;
}
a#selected{
cursor:default;
display:block;
width:110px;
background:#ccc;
background-image:linear-gradient(rgba(0,255,0,.4),rgba(0,255,0,.7)),linear-gradient(#eee,#ccc);
background-size:8px,102%;
background-position:right;
background-repeat:no-repeat;
border:1px solid;
border-color:#eee #ccc #ccc #eee;
box-shadow:0 0 3px rgba(0,0,0,.5),inset 1px 1px 1px rgba(255,255,255,.8);
border-radius:2px;
margin-left:-50px;
margin-bottom:.7em;
text-align:center;
text-decoration:none;
color:#000;
text-shadow:0 0 0 #fff;
}
<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a id="selected" href="">Tuner</a></li>
<li><a href="">CD</a></li>
<li><a href="">Tape</a></li>
<li><a href="">LP</a></li>
<li><a href="">Game</a></li>
</ul>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment