Wednesday, 20 April 2011

How to make CSS3 Windows 7 buttons

Just playing around with the lovely CSS3 controls and decided to see if I could generally replicate the Window 7 style buttons without images.  Well I have pretty much achieved the same effect using the CSS below.

input[type="button"] 
{
  cursor:pointer; 
  border: 1px solid #707070;
  background-color: #F0F0F0;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  -o-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  -webkit-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  -moz-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  padding: 3px 6px;
}

input[type="button"]:hover 
{
  cursor:pointer;
  background-color: #EAF6FD;
  border: 1px solid #3C7FB1;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -o-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -webkit-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
  -moz-box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled], input[type="button"][disabled]:hover
{
  border: 1px solid #ADB2B5;
  text-shadow: 1px 1px #fff;
  cursor:default;
  background-color: #F4F4F4;
  box-shadow: inset 0 1px 2px #fff;
  -o-box-shadow: inset 0 1px 2px #fff;
  -webkit-box-shadow: inset 0 1px 2px #fff;
  -moz-box-shadow: inset 0 1px 2px #fff;
}

CSS3 is fun, wish IE6,7,8 would suddenly disappear ;)

No comments: