I’ve been doing a lot of experimenting recently with CSS3 gradients, box shadows, transitions etc… The result is this set of buttons created entirely from CSS (no images used at all).
They have been tested using Safari 5, Firefox 5, Chrome 12 and Opera 11.5 on the Mac. Sorry if you’re using any form of Internet Explorer, but as it doesn’t have support for some of the CSS3 properties involved I haven’t bothered even trying to see how they render.
You can see the full demo here →
1 My first creation is a transparent button using subtle gradients and box shadows. Basically it’s a pure CSS3 emulation of some buttons that appear on the Apple site. The original buttons use .png graphics to create the effect.
a.transparent:link, a.transparent:visited {
color: #fff;
padding: 20px 40px;
border-style: none;
background-color: rgba(0,0,0,0);
font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0 2px 2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
display: inline-block;
}
a.transparent:hover {
-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
a.transparent:active {
background: rgba(0,0,0,.3);
-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}
2 In a previous post I showed how to create a 3D text effect using CSS text shadows. The lettering appears to stand up from a flat surface. I started with this effect, and added a glow to the hover state and made the text shift down for the active state.
a.text:link, a.text:visited {
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
font: 60px/60px 'ChunkFiveRegular';
display: inline-block;
}
a.text:hover {
text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
a.text:active {
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
margin-top: 4px;
line-height: 56px;
color: #dcdcdc;
}
3 The next set of buttons is an exact copy of the .png buttons that I designed when I coded this blog, except that obviously this time no images whatsoever are envolved. The buttons are created entirely with CSS3.
a.pager1:link, a.pager1:visited {
font: 14px/26px MisoRegular;
letter-spacing: 1px;
text-shadow: #1C9328 0 -1px 0;
color: #fff;
background-color: #444;
display: inline-block;
margin-right: 1px;
padding-right: 15px;
padding-left: 15px;
-moz-border-radius: 13px 0 0 13px;
-webkit-border-radius: 13px 0 0 13px;
border-radius: 13px 0 0 13px;
background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}
a.pager2:link, a.pager2:visited {
font: 14px/26px MisoRegular;
letter-spacing: 1px;
text-shadow: #1C9328 0 -1px 0;
color: #fff;
background-color: #444;
display: inline-block;
padding-right: 15px;
padding-left: 15px;
-moz-border-radius: 0 13px 13px 0;
-webkit-border-radius: 0 13px 13px 0;
border-radius: 0 13px 13px 0;
background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}
a.pager1:hover, a.pager2:hover {
line-height: 22px;
padding-right: 13px;
padding-left: 13px;
border: 2px solid #9433FF;
background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
text-shadow: #37197e 0 -1px 0;
}
a.pager1:active, a.pager2:active {
line-height: 26px;
padding-right: 15px;
padding-left: 15px;
border-style: none;
background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}
4 And finally – well, who can resist a big red button!
a.round:link, a.round:visited {
width: 140px;
color: #fff;
font: 28px/30px LeagueGothicRegular;
text-transform: uppercase;
text-shadow: #6f0909 0 -1px 1px;
border: 1px solid #6F0909;
display: inline-block;
padding-top: 40px;
padding-bottom: 40px;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
-moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
-webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
a.round:hover {
-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
-moz-transform: rotate(0deg);
-moz-transition: -moz-transform 0.3s ease-out;
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.3s ease-out;
-o-transform: rotate(0deg);
-o-transition: -o-transform 0.3s ease-out;
}
a.round:active {
-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
You can see a working demo of all the buttons here: Cross browser pure CSS3 buttons →
If you liked this article and the demo, you may be interested in my other CSS demos: