CSS3 Button Generator lets you visually style an ordinary HTML link into a sleek button using all the new goodies of CSS3. This includes gradient backgrounds, rounded corners, drop shadows, and even tranforms. Throw in support for CSS3 animations that lets you gradually change from the button's default state to its hover state, and you got one sexy looking button without the overhead of images!

CSS3 Magic

CSS Settings (:hover)

Text & Fonts

Background

background-color Flat Gradient

end-color

gradient-type

radial-gradient-size

gradient-angle °

width %

height %

padding

background-size-x %

background-size-y %

Border

Transform

Transition

CSS Code

.button {
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0px 0px 10px;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-border-radius: 25px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease;
  background-color: #6E7849;
  background-image: -moz-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -ms-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -o-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: -webkit-linear-gradient(90deg, #B9C788, #6E7849);
  background-image: linear-gradient(90deg, #B9C788, #6E7849);
  border-radius: 25px;
  border: 2px solid #4a5032;
  box-shadow: #6E7849 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-size: 4em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #000000 5px 5px 15px;
  transition: all 0.5s ease;
}

.button:hover {
  padding: 15px;
}

Responsive Theme