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!

CSS Settings (:hover)

Text & Fonts

em

Background

Flat Gradient
°
%
%
%
%

Border

Transform

°
°
°
°

Transition

These transitions add an animation between the normal and hover state of a CSS property. For this to work, the selected property must therefore be different in the hover section.

s

CSS Code

.button {
  -moz-border-radius: 25px;
  -moz-box-shadow: #6E7849 0 0 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: #B9C788;
  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 0 0 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;
}