Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS3 Button
body { font: 250%/1.2 sans-serif; background: #eee; }
a { color: #fff; text-decoration: none; outline: none; }
.btn {
display: inline-block;
border-radius: 8px;
box-shadow: 0 8px 0 #1a74a1,
0 15px 20px rgba(0, 0, 0, 0.35);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 25px;
font-family: "Carter One", sans-serif;
text-shadow: 0 -1px 1px rgba(19, 65, 88, 0.8);
background: #3194c6;
background: -moz-linear-gradient(#3194c6, #5bacd6);
background: -webkit-linear-gradient(#3194c6, #5bacd6);
border-radius: 8px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.15);
-moz-transition: -moz-transform 0.2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
}
.btn:active {
box-shadow: 0 8px 0 #1a74a1,
0 12px 10px rgba(0, 0, 0, 0.3);
}
.btn:active span {
-moz-transform: translate(0, 4px);
-webkit-transform: translate(0, 4px);
}
<a href="#" class="btn"><span>Press this!</span></a>
WebFontConfig = {
google: {
families: ['Carter+One']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
name: CSS3 Button
description: Polished Button without using Images
authors:
- Christian Fleschhut
resources:
- http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
normalize_css: no
@cfleschhut

This comment has been minimized.

Copy link
Owner Author

commented Aug 7, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.