En este post vamos a ver un poco como mejorar el diseño de nuestros links, para eso vamos a probar varios trucos de CSS
Creando botones con CSS3
Lo usual es utilizar imágenes para crear botones pero actualmente CSS nos permite hacer varias cosas, incluso sería posible añadir degradados para el botón o sombras para el texto
1 2 3 4 5 6 7 8 9 10 | a.button { background-color: #FFAD00; border: 1px solid #FE7900; border-radius: 7px 7px 7px 7px; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5); color: #FFFFFF; display: inline-block; font-weight: bold; padding: 10px 20px; } |
Ya sólo faltaría darle algún efecto cuando alguien pase el mouse por encima de nuestro botón, para eso bastaría un código como este:
1 2 3 4 | a.button:hover { background-color:#ff8100; } |
Hasta ahí podría estar muy bien pero podremos hacer que la transición entre el botón y cuando pase el mouse sea más suave y para eso podemos utilizar la nueva propiedad transition
1 | a.button:hover { transition: background-color 1s; -webkit-transition: background-color 1s; } |
Si nos da mucha flojera escribir nosotros mismo el código pues no hay problema, tenemos varias herramientas como Best button generator