Simple CSS Button

Simple CSS buttons with gradients. Styles can be easily applied to an element by adding button to an element along with a color.

In this example, I have two colors - green and blue.

As Link
HTML
<a class="button blue" href="#" >As Link</a>

<button class="green" >As Button</button>
CSS
button,
.button {
  display : inline-block;
  cursor : pointer;
  
  border-style : solid;
  border-width : 1px;
  border-radius : 50px;
  padding : 10px 18px;
  box-shadow : 0 1px 4px rgba(0,0,0,.6);
  font-size : 9.5pt;
  font-weight : bold;
  color : #fff;
  text-shadow : 0 1px 3px rgba(0,0,0,.4);
  font-family : sans-serif;
  text-decoration : none;
}

button.blue,
.button.blue {
  border-color : #2989d8;
  background: #2989d8;
  background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#2989d8), color-stop(100%,#1e5799));
  background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%);
  background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%);
  background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%);
  background: linear-gradient(top, #2989d8 0%,#1e5799 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );
}

button.green,
.button.green {
  border-color: #8fc800;
  background: #8fc800;
  background: -moz-linear-gradient(top, #8fc800 0%, #438c00 100%);
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#8fc800), color-stop(100%,#438c00));
  background: -webkit-linear-gradient(top, #8fc800 0%,#438c00 100%);
  background: -o-linear-gradient(top, #8fc800 0%,#438c00 100%);
  background: -ms-linear-gradient(top, #8fc800 0%,#438c00 100%);
  background: linear-gradient(top, #8fc800 0%,#438c00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#8fc800', endColorstr='#438c00',GradientType=0 );
}

Oct 11 2009

Simple CSS Button

A simple CSS button that I use in many sites.