Enlaces con CSS que simulan botones

Vamos a mostrar cómo realizar un enlace que tenga aspecto de botón. Dicho de otra manera, vamos a crear botones a partir de enlaces, aplicando una hoja de estilo que hará que los enlaces se muestren de forma similar a como serían los botones. Para ello, vamos a hacer que, al pasar el ratón por encima de un enlace, este parezca como que está pulsado.

Código HTML

Vamos a partir básicamente de un enlace, al que asignaremos una clase definida con CSS. Como los estilos los vamos a aplicar con CSS, abriremos nuestra plantilla HTML e introduciremos el siguiente código en el cuerpo de la página (entre las etiquetas <body>.... </body>).

Nuestro navegador lo interpretaría a lo bruto:

El código CSS

Vamos a definir la clase “boton”, que es el estilo que se hemos asignado para el enlace. Como sabemos, los enlaces tienen diferentes estados (visitados, no visitados, o con el cursor del ratón por encima), así que tendremos que definir el estilo para cada estado.

Introduce las siguientes reglas en el archivo CSS “css3.css“:

En principio, con la clase .boton hemos definido estilos para cualquier estado del enlace. Después, para los diferentes estados del enlace se han definido sus correspondientes estilos, que son el mismo para los estados visitado y no visitado y diferentes para el estado hover, que es el que se aplica cuando está el ratón sobre el enlace.

  • Con lo aprendido en esta sección haz más enlaces con botones.

 

 

 

Anuncios