Pointless One

Nice buttons with CSS3

A year ago the only way to create nice buttons was to use images. Now with power of CSS3 modern browsers make it possible to do amazing thing without single images. Here is nice example.

Note: this post contains some styled elements that are not deisplayed properly in RSS/Feed readers. Please, read this post in brovser if you’re interested.

Screenshots

img-15
img-14

Demo

Push Me!

How’s it done

Here’s the full css for creating buttons like one above.

.button {
  display: inline-block;
  height: 18px;
  width: 160px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-width: 2px 1px 1px;
  border-style: solid;
  border-color: transparent;
  -moz-border-top-colors: transparent rgba(255, 255, 255, 0.5);
  -moz-border-left-colors: transparent;
  -moz-border-right-colors: transparent;
  -moz-border-bottom-colors: transparent;
  background: -moz-linear-gradient(top, #007A1F, #004308);
  background: -webkit-gradient(linear, left top, left bottom, from(#007A1F), to(#004308));
  background: -webkit-gradient(linear, 0 3, 0 15, from(#007A1F), to(#004308));
  -moz-background-origin: border;
  -webkit-background-origin: border;
  background-origin: border-box;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
  position: relative;
  text-decoration: none;
}
.button:focus {
  outline: 0px none;
  -moz-box-shadow: 0px 0px 5px green;
  -webkit-box-shadow: 0px 0px 5px green;
}
.button:active {
  background: -moz-linear-gradient(bottom, #007A1F, #004308);
  background: -webkit-gradient(linear, left top, left bottom, from(#004308), to(#007A1F));
  -moz-border-top-colors: transparent;
  -moz-background-origin: border;
  -webkit-background-origin: border;
  background-origin: border-box;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.button:before {
  content: " ";
  border: 0px none;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  display: block;
  height: 18px;
  width: 159px;
  -webkit-border-radius: 20px;
  position: absolute;
  top: -1px;
}
.button:active:before {
  display: none;
}

I have to warn you that this was tested only in Firefox nightlies and latest WebKit. Also WebKit uses a sort of a hack to get the shiny line at the top. I had to do that because only Mozilla supports border-colors at the moment. It’s possible to make it look the same in older Mozilla browsers using the code for WebKit in the example.

Have fun!