Boton Animado

Hoy te traigo un Codigo muy simple 
El cual solo deveras agregar un codigo css a la plantilla...
el siquiente codigo:

AGREGAR EL CODIGO ANTES DE LA ETIQUETA
]]> < / b:skin >

#botonfire{ background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%); background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%); background:-o-linear-gradient(#fff 0%,#DEDEDE 100%); background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%); background:linear-gradient(#fff 0%,#DEDEDE 100%); border:solid 1px #DEDEDE; border-radius:5px; text-align:center; padding:5px; color:#f90; width:75px; transition:all 2s; -moz-transition:all 2s; -ms-transition:all 2s; -o-transition:all 2s; -webkit-transition:all 2s; } #botonfire:hover{ background:-moz-linear-gradient(#f90 0%,#F63 100%); background:-ms-linear-gradient(#f90 0%,#F63 100%); background:-o-linear-gradient(#f90 0%,#F63 100%); background:-webkit-linear-gradient(#f90 0%,#F63 100%); background:linear-gradient(#f90 0%,#F63 100%); color:#fff; padding:8px; width:100px; font-size:18px; text-shadow:0 0 10px #FFF; }

Ahora agregaremos el efecto de boton a texto solo le agregaremos un ID
EJEPMLO:

<div id="botonfire"> Titulo Del Boton </div>

y listo solo deveras agregar id="botonfire" en un atributo <div>
podras editar los los codigos que empiezen con #fff y agrega al codigo del color que desees que aparezca!

ESCRITO POR: Andy Gomez

Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com

Twittear Compartir