Enlaces con estilos CSS que simulan botones

  • Por
  • 12 de abril de 2005
  • Valoración:
  • 3 Comentarios
  • CSS
Hacer un botón con CSS sin utilizar formularios, simplemente con enlaces que se comportan visualmente como botones.
En este taller de CSS 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.

Lo mejor para darse cuenta del objetivo de este taller es ver un ejemplo.

El 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, el enlace es tan sencillo como este:

<a href="#" class="enlaceboton">Hola!!</a>

El código CSS

Vamos a definir la clase "enlaceboton", que es el estilo que se ha 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.

.enlaceboton {    font-family: verdana, arial, sans-serif;
   font-size: 10pt;
   font-weight: bold;
   padding: 4px;
   background-color: #ffffcc;
   color: #666666;
   text-decoration: none;
}
.enlaceboton:link,
.enlaceboton:visited {
   border-top: 1px solid #cccccc;
   border-bottom: 2px solid #666666;
   border-left: 1px solid #cccccc;
   border-right: 2px solid #666666;
}
.enlaceboton:hover {
    border-bottom: 1px solid #cccccc;
   border-top: 2px solid #666666;
   border-right: 1px solid #cccccc;
   border-left: 2px solid #666666;
}


En principio, con la clase .enlaceboton se han 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.

Tan sencillo como esto. Si se desea, se puede ver el ejemplo en marcha.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Emiliano

04/8/2007
ya taaaaa... el asunto es el siguiente
en la primera linea de codigo, el dreamweaver, crea automaticamente las siguienters lineas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

al sacarselas y dejar únicamente en la primera linea <html> funciona...

Mi nueva pregunta es qué tan importante son esos codigos que aparecen, porque en un tiempo me decían que son importantes, y a veces cuando los dejo se ve todo bien y otras veces no.

Gracias...

albert

11/1/2011
dtt
Son muy importantes si no ahora , en un futuro bastante cercano si ,

juan carlos

02/8/2012
¿varios botones?
Como podríamos hacer para que sirviese ese CSS en varios botones de la misma página?

Muchas gracias!

Compartir