Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Nice button with CSS3 - to view or play: http://dabblet.com/gist/1593891
body {
margin: 3em;
}
.button {
padding: 10px 15px;
background: #4479BA;
text-decoration: none;
color: #FFF;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
transition-duration: 0.2s;
}
.button:hover {
background: #356094;
border: solid 1px #2A4E77;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.9);
text-decoration: underline;
}
.button:active {
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
<!-- content to be placed inside <body>…</body> -->
<a class="button" href="#">Button</a>
{"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