Elegant Button using CSS3 Transitions

This works by using CSS3 transitions. Basically on the :hover pseudo-selector you need to change: The background image. The background position. The text-indent to position the text.

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<input type="submit" value="Log In" class="login" />

CSS

body { margin: 30px auto; }

input {
 background:url('http://jenniferperrin.com/blog/wp-content/uploads/2012/09/btn-login.png') no-repeat 5px 5px #5a7c87;
  width: 100px;
  cursor:pointer;
  border-radius:50px;
  padding:10px 20px 10px 0;
  color:White;
  font-family:'Yanone Kaffeesatz';
  font-size:14px;
  letter-spacing:1px;
  text-align:left;
  text-indent:40px;
  display:block;
  margin:0 auto;
 
  /* Animations: */
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-duration: .4s;
  -webkit-transition-property: all;
  -moz-transition-timing-function: ease-in-out;
  -moz-transition-duration: .4s;
  -moz-transition-property: all;
}

input:hover {
  background-image: url('http://jenniferperrin.com/blog/wp-content/uploads/2012/09/btn-login-hover.png');
  background-position: 65px 5px;
  text-indent: 16px;  
}