Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created January 9, 2012 00:53
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save chriscoyier/1580329 to your computer and use it in GitHub Desktop.
Save chriscoyier/1580329 to your computer and use it in GitHub Desktop.
YouTube Footer Buttons
/*
YouTube Footer Buttons
*/
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover {
border-color: #999;
background: linear-gradient(top,white 0,#E0E0E0 100%);
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active, .button:focus {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
box-shadow: inset 0 1px 2px #aaa;
background: linear-gradient(top,#E6E6E6 0,gainsboro 100%);
}
.button:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
margin: 0 0 0 4px;
position: relative;
top: -1px;
}
.button:hover:after {
border-top-color: black;
}
body {
background: #e8e8e8;
text-align: center;
padding: 100px;
}
<button class="button" role="button">
Button #1
</button>
<button class="button" role="button">
Button #2
</button>
<button class="button" role="button">
Button #3
</button>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment