[Truco CSS] Cómo convertir cualquier elemento en un botón

A veces nos puede interesar que un elemento HTML tenga las propiedades y ventajas propias, pero a la vez que parezca y actúe como un botón (<button>). Para ello, podemos usar CSS o Javascript. En este ejemplo usaremos CSS, y especialmente los pseudo-selectores :hover y :active, para añadir apariencia de botón a un elemento a.

Consideremos el siguiente elemento:

<a href="http://fcharte.com/">Volver a portada</a>

Es evidente que el resultado de tal elemento, antes de añadirle el estilo, será: Volver a portada
Para darle aspecto de botón, empezaremos quitando el subrayado mediante la propiedad text-decoration, y desactivando el cursor de la mano a través de la propiedad cursor:

a {
text-decoration: none;
cursor: default;
}

Lo próximo que haremos será cambiar el color de la letra, añadirle un borde y un fondo:

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid gray;
background-color: #e0e0e0;
}

De esta manera, nuestro enlace quedará así: Volver a portada
Pero sigue sin parecer un botón, por lo que cambiaremos el tamaño y la fuente de letra y ajustaremos los márgenes interiores (padding):

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid gray;
background-color: #e0e0e0;
font-family: Arial;
font-size: 12px;
padding: 1px 5px;
}

El atributo 1px 5px de la propiedad padding establece que el márgen interior de arriba y abajo será de 1 píxel, mientras que los márgenes laterales serán de 5px. El botón queda ahora así: Volver a portada

Ahora usaremos algunas propiedades de CSS3 para completar el estilo base de nuestro botón (Internet Explorer no soporta algunas de ellas):

a {
text-decoration: none;
cursor: default;
color: #000000;
border: 1px solid #444444;
background-color: #e0e0e0;
font-family: Arial, sans-serif;
font-size: 13px;
padding: 1px 5px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#efefef), color-stop(0.2,#eaeaea), color-stop(0.48,#eaeaea), color-stop(0.52,#d0d0d5));
background-image: -moz-linear-gradient(top,#efefef 0%,#eaeaea 20%,#eaeaea 48%,#d0d0d5 52%);border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: inset 0px 0px 5px #ffffff;
-moz-box-shadow: inset 0px 0px 5px #ffffff;
-webkit-box-shadow: inset 0px 0px 5px #ffffff;
}

Nuestro botón ahora tiene un fondo degradado (sólo en Firefox y Chrome), las esquinas redondeadas y un ligero brillo blanco entre el borde y el texto: Volver a portada
Podríamos sustituir estas propiedades CSS3 que Internet Explorer no soporta por imágenes, pero eso se convertiría en un trabajo tedioso. También podríamos utilizar CSS3Pie, una librería CSS para conseguir que Internet Explorer soporte estas propiedades.

Lo siguiente que hemos de hacer es que nuestro falso botón reaccione a los eventos del ratón (cuando el ratón pase por encima y cuando el ratón haga clic en el botón). Para que el fondo del botón cambie cuando el ratón pase por encima usaremos el siguiente código:

a:hover {
background-color: #d0e5fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#eaffff), color-stop(0.2,#e0f0ff), color-stop(0.48,#e0f0ff), color-stop(0.52,#c0e0ea));
background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);border: 1px solid #4488aa;
}

Con este código, al pasar sobre el botón tendría este aspecto: Volver a portada

Finalmente, necesitaremos algo más de código CSS para que nuestro botón reaccione al pulsarlo:

a:active {
background-color: #a0c5ea;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#caefef), color-stop(0.2,#caefef), color-stop(0.58,#caefef), color-stop(0.62,#b0d0da));
background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
border: 1px solid #004488;
box-shadow: inset 0px 0px 3px #000000;
-moz-box-shadow: inset 0px 0px 3px #000000;
-webkit-box-shadow: inset 0px 1px 2px #000000;
outline: 0px solid;
}

Y el enlace, ya convertido en botón, será así al pulsarlo: Volver a portada

El código completo del ejemplo está después del salto

<!DOCTYPE html>
<html>
 <head>
  <title>Enlaces que parecen botones</title>
  <style type="text/css">
   a {
   text-decoration: none;
   cursor: default;
   color: #000000;
   border: 1px solid #444444;
   background-color: #e0e0e0;
   font-family: Arial, sans-serif;
   font-size: 13px;
   padding: 1px 5px;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#efefef), color-stop(0.2,#eaeaea), color-stop(0.48,#eaeaea), color-stop(0.52,#d0d0d5));
   background-image: -moz-linear-gradient(top,#efefef 0%,#eaeaea 20%,#eaeaea 48%,#d0d0d5 52%);
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   box-shadow: inset 0px 0px 5px #ffffff;
   -moz-box-shadow: inset 0px 0px 5px #ffffff;
   -webkit-box-shadow: inset 0px 0px 5px #ffffff;
   }
   a:hover {
   background-color: #d0e5fa;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#eaffff), color-stop(0.2,#e0f0ff), color-stop(0.48,#e0f0ff), color-stop(0.52,#c0e0ea));
   background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
   border: 1px solid #4488aa;
   }
   a:active {
   background-color: #a0c5ea;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,#caefef), color-stop(0.2,#caefef), color-stop(0.58,#caefef), color-stop(0.62,#b0d0da));
   background-image: -moz-linear-gradient(top,#eaffff 0%,#e0f0ff 20%,#e0f0ff 48%,#c0e0ea 52%);
   border: 1px solid #004488;
   box-shadow: inset 0px 0px 3px #000000;
   -moz-box-shadow: inset 0px 0px 3px #000000;
   -webkit-box-shadow: inset 0px 1px 2px #000000;
   outline: 0px solid;
   }
  </style>
 </head>
 <body>
  <a href="http://fcharte.com">Volver a portada</a>
 </body>
</html>