En este tutorial te enseñare cómo crear este boton con pseudo-elementos, con una sola etiqueta class y el gran poder del CSS. Se trata de un boton que lleva incorporada una imagen png de una flechita (de ahi lo del nombre de "Ir) que al presionarlo se 'hunde' dando un efecto visual muy bueno. Lo puedes utilizar para cualquier cosa en tu blog o web y ademas es muy facil de realizar.
ejemplo de como te quedara
Para añadirlo a nuestro blog o web, lo primero es poner el codigo con los estilos CSS en nuestra plantilla y guardar los cambios. En Blogger los pondremos antes de ]]></b:skin> quitando la etiqueta <style> del principio y del final.
<style>
/* boton Ir Azul
----------------------------------------------- */
.botonirazul {
background-color: #3BB3E0;
background-image: -moz-linear-gradient(center bottom , #2CA0CA 0%, #3EB8E5 100%);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #2AB7EC inset, 0 5px 0 0 #156785, 0 10px 5px #999999;
color: #FFFFFF !important;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
padding: 10px 50px 10px 20px;
position: relative;
text-decoration: none;
}
.botonirazul:active {
background-image: -moz-linear-gradient(center bottom , #3EB8E5 0%, #2CA0CA 100%);
box-shadow: 0 1px 0 #2AB7EC inset, 0 2px 0 0 #156785, 0 5px 3px #999999;
top: 3px;
}
.botonirazul:before {
background-color: #2591B4;
background-image: url("http://hostredeando.ucoz.es/imagenes1/imagenes-b/right_arrow.png");
background-position: center center;
background-repeat: no-repeat;
border-radius: 50% 50% 50% 50%;
box-shadow: 0 1px 0 #052756 inset, 0 1px 0 #60C9F0;
content: "";
height: 20px;
margin-top: -9px;
position: absolute;
right: 15px;
top: 50%;
width: 20px;
}
.botonirazul:active:before {
box-shadow: 0 1px 0 #60C9F0 inset, 0 3px 0 #0E3871, 0 6px 3px #1A80A6;
margin-top: -12px;
top: 50%;
}
</style>
Ahora solo queda añadir este codigo cada vez que quieras mostrar el boton, sustituyendo lo que esta en rojo por la url y el texto que quieras poner.
<a class="botonirazul" href="URL"><b>TEXTO</b></a>
|
