<a class="a-btn" href="#">
<span class="a-btn-text">Un bot&oacute;n</span>
<span class="a-btn-slide-text">animado</span>
<span class="a-btn-icon-right">&nbsp;</span> </a>

<style><!--
/* el enlace es el contenedor */
.a-btn {
background:#CDE;
background:-moz-linear-gradient(#CDE, #678);
background:-webkit-linear-gradient(#CDE, #678);
background:-o-linear-gradient(#CDE, #678);
background:-ms-linear-gradient(#CDE, #678);
background:-linear-gradient(#CDE, #678);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#CDE', endColorstr='#678',GradientType=0 );
border:1px solid #89A;
border-radius:20px;
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
display:inline-block;
height:40px;
line-height: 40px;
margin:10px 0px;
padding: 0 70px 0 20px; /* esto dependerá del tamaño de la imagen */
position:relative;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;
}
/* el texto visible */
.a-btn-text {
color:#456;
display:block;
font-size:20px;
text-shadow:0 1px 1px #FFF;
white-space:nowrap;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}
/* el texto oculto */
.a-btn-slide-text {

background:#456; color:#FFF;
font-size:20px;
font-family: Georgia;
height:100%;
line-height:40px;
overflow:hidden;
position:absolute;
right:52px;
text-align:left;
text-indent:10px;
text-shadow:1px 1px 1px #000;
top:0px;
white-space:nowrap;
width:0;
-moz-transition:width 0.3s linear;
-webkit-transition:width 0.3s linear;
-o-transition:width 0.3s linear;
-ms-transition:width 0.3s linear;
transition:width 0.3s linear;
}
/* el contenedor de la imagen derecha */
.a-btn-icon-right {
border-left:1px solid #89A;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
height:100%;
position:absolute;
right:0;
top:0;
width:52px;
}
/* y la imagen */
.a-btn-icon-right span {
background:transparent url(arrow_right.png) no-repeat 50% 55%;
height:38px;
left:50%;
margin:-20px 0px 0px -20px;
opacity:0.7;
position:absolute;
top:50%;
width:38px;
-moz-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-o-transition:all 0.3s linear;

-ms-transition:all 0.3s linear;
transition:all 0.3s linear;
}
/* los efectos hover */ .a-btn:hover {
padding-right:180px;
}
.a-btn:hover .a-btn-text {
color:#000;
text-shadow:0px 1px 1px #000;
}
.a-btn:hover .a-btn-slide-text {
width:100px;
}
.a-btn:hover .a-btn-icon-right span {
opacity:1;
}.a-btn:hover {}
.a-btn:hover .a-btn-slide-text {}
--></style>

<div id="buttonwrap">
<a id="button" href="http://vagabundia.blogspot.com/2011/08/transiciones-combinadas.html">
CSS3</a></div>

<style>
#buttonwrap {
margin: 0 auto;
text-align: center;
width: 600px;
}
#button {
-moz-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-moz-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
-webkit-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
-o-transition: all 0.5s cubic-bezier(1, 0.8, 0.5, 1) 0.5s;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
background-image: -moz-linear-gradient(center top , #FDDDFD, #A182F8);
-webkit-gradient(linear,left top,left bottom,color-stop(0, #FDDDFD),color-stop(1, #A182F8));
border: 5px solid #AE5BAD;
border-radius: 25px;
color: #FFF;
display: block;
font-family: Tahoma;
font-size: 60px;
font-weight: 300;
margin: 80px auto;
padding: 60px 15px;
position: relative;
text-decoration: none;
text-shadow: 5px 3px 1px rgba(0, 0, 0, 0.5);
width: 150px;
z-index: 1;
}
#button:hover {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
-webkit-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
-o-transition: padding 0.2s ease 0s, top 0.2s ease 0s;
background-image: -moz-linear-gradient(center top , #fdddfd, #fdddfd, #a182f8);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FDDDFD),color-stop(0.2, #FDDDFD),color-stop(1, #a182f8));
padding: 70px 30px;
top: -10px;
}
#button:after {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
#button:before {
-moz-transition: all 0.2s ease 0s;
-wekit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
border-radius: 35px;
bottom: -30px;
box-shadow: 0 0 100px rgba(255, 255, 255, 0.1) inset;
content: "";
left: -30px;
position: absolute;
right: -30px;
top: -30px;
z-index: -2;
}
#button:hover:before {
bottom: -20px;
box-shadow: 0 0 100px rgba(255, 255, 255, 0.2) inset;
left: -20px;
right: -20px;
top: -20px;
}
#button:active {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) inset;
}
</style>

<input class="button" type="button" value="button" />
<input class="button" type="submit" value="submit" /> 
<input class="button" type="reset" value="reset" />

<style>
.button
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #4972B5;
background: linear-gradient(left, #4972B5, #618ACB);
background: -moz-linear-gradient(left, #4972B5, #618ACB);
background: -webkit-linear-gradient(left, #4972B5, #618ACB);
background: -o-linear-gradient(left, #4972B5, #618ACB);
color: #FFFFFF;
}
.button:hover
{
background: #365D9D;
background: linear-gradient(left, #365D9D, #436CAD);
background: -moz-linear-gradient(left, #365D9D, #436CAD);
background: -webkit-linear-gradient(left, #365D9D, #436CAD);
background: -o-linear-gradient(left, #365D9D, #436CAD);
color: #FFFFFF;
border-color: #FBFFAD;
}
 </style>

<div id="container"><a class="btn" href="http://www.htmllion.com/css3-linear-gradients-tool.html">
Generador</a></div>

<style><!--
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #98C2FA; /* old browsers */
background: -moz-linear-gradient(top, ##a9e6f5 0%, #6faee8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6a3e3), color-stop(100%,#6faee8)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
--></style>

<form action="http://tutorialgloriav.eklablog.com/"
method="get"><button style="background: #ffceff; width: 150px;
"><img src="http://sl.glitter-graphics.net/pub/664/664342c5z94dwhwp.gif"
alt="" /></button></form>

<a href="http://tutorialgloriav.eklablog.com/" target="_blank"
><button title="Texto que acompaña"><a
href="http://tutorialgloriav.eklablog.com/" target="_blank"></a><a href=
"http://tutorialgloriav.eklablog.com/" target="_blank"></a><
a href="http://fondogifimagengloriav.jimdo.com" target="_blank"></a>
<table border="3" background="http://i009.radikal.ru/0909/66/399583cdb8f1.gif">
<tbody><tr><td><center> Texto</center>
</td></tr></tbody></table></button></a>

<form action="http://tutorialgloriav.eklablog.com/" target="_blank"
method="get">
<button style="type=&quot;submit&quot;
"><img src="http://mobilepics.ru/uploads/animation/brands/brands-103.gif"
width="42" height="68" alt="" /></button>
</form>

<form action="http://tutorialgloriav.eklablog.com/" target="_blank" method="get">
<button type="submit">
<img src="http://animo2.ucoz.ru/_ph/54/1/167588115.jpg"
width="65" height="87" align="absmiddle"
alt="" />GloriaV</button><input
type="hidden" name="tok" value=
"87a7655eb830f8c6288fa53fb73d2c04" />
</form>

<form action="http://tutorialgloriav.eklablog.com/" target="_blank" method="get">
<button type="submit">
<img src="http://animo2.ucoz.ru/_ph/54/1/366345088.jpg" align="absmiddle"
alt="" /> Texto</button>
</form><form><input type="submit"
value="Tutorial" /></form>

<form action="http://www.realsweb.com/link_to.php">
<input type="hidden" value="_self" name="h" /> <select name="links">
<optgroup label="-- 1 Nombre de web">
<option value="URL de página">
Nombre de página 1
</option>
<option value="URL de página ">
Nombre de página 2
</option>
<option value="URL de página">
Nombre de página 3
</option>
</optgroup>
<optgroup label="-- 2 Nombre de web">
<option value="URL de página">
Nombre de página 4
</option>
<option value="URL de página">
Nombre de página 4
</option>
<option value="URL de página">
Nombre de página 5
</option>
</optgroup>
</select> <input type="submit" value="Texto para boton" />
</form>

<form action="http://freiman.info/files/link.php" method="get">
<br />
<br />
<input type="hidden" name="h" value="_self" /><br />
<br />
<select id="links" name="links">
<option value="http://" target="_blank">
Тexto 1
</option>
<option value="http://" target="_blank">
Тexto 2
</option>
<option value="http://" target="_blank">
Тexto 3
</option>
<option value="http://" target="_blank">
Тexto 4
</option>
<option value="http://" target="_blank">
Тexto 5
</option>
<option value="http://" target="_blank">
Тexto 6
</option>
<option value="http://" target="_blank">
Тexto 7
</option>
<option value="http://" target="_blank">
Тexto 8
</option>
<option value="http://" target="_blank">
Тexto 9
</option>
</select> <input type="submit" value="Тexto para botón" /><br />
<br />
<input type="hidden" name="tok" value="87a7655eb830f8c6288fa53fb73d2c04" />
</form>

<table>
<tr>
<td>
<form action="http:" target="_blank" method="get">
<input type="submit" value=" Nº1" /><input type="hidden" name="tok" value="87a7655eb830f8c6288fa53fb73d2c04" />
</form>
</td>
<td>
<form action="http:" target="_blank" method="get">
<input type="submit" value="Nº2" /><input type="hidden" name="tok" value="87a7655eb830f8c6288fa53fb73d2c04" />
</form>
</td>
<td>
<form action="http://" target="_blank" method="get">
<input type="submit" value="Nº3" /><input type="hidden" name="tok" value="87a7655eb830f8c6288fa53fb73d2c04" />
</form>
</td>
<td>
<form action="http://" target="_blank" method="get">
<input type="submit" value="Nº 4" /><input type="hidden" name="tok" value="87a7655eb830f8c6288fa53fb73d2c04" />
</form>
</td>
</tr>
</table>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}
</style>