Foros del Web » Creando para Internet » CSS »

Vínculos que parezcan un botón

Estas en el tema de Vínculos que parezcan un botón en el foro de CSS en Foros del Web. En una pequeña página que estoy preparando he dado un estilo a los botones de input mediante una pequeña imagen de fondo de 24x1 píxel ...
  #1 (permalink)  
Antiguo 11/04/2008, 12:48
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 11 meses
Puntos: 0
Vínculos que parezcan un botón

En una pequeña página que estoy preparando he dado un estilo a los botones de input mediante una pequeña imagen de fondo de 24x1 píxel que se repite horizontalmente para que simule un botón en relieve.
Ahora me gustaría hacer lo mismo con algunos vínculos <a>, pero no consigo centrar el texto verticalmente dentro de los márgenes del botón (me queda siempre alineado por arriba y no logro hacerlo bajar con un vertical-align). Os adjunto las dos clases css (la del input, que funciona bien y la del link, que no) a ver si alguien puede decirme qué es lo que no hago correctamente.

Saludos y gracias de antemano

Código:
input.groovybutton
{
   font: bold 11px "Lucida Grande", arial, sans-serif;
   color: #444;
   height:24px;
   background-color:#aaaaaa;
   background-image:url(imagen-1.gif);
   border-style:solid;
   border-color:#aaaaaa;
   border-width:1px;
   padding-right:12px;
   padding-left:12px;
}
Código:
a.groovy {
	color: #444444;
	font: bold 11px "Lucida Grande", Arial, sans-serif;
	text-align: center;
	background: #aaaaaa url(imagen-1.gif) repeat-x;
	width: 112px;
	height: 22px;
	display: block;
	border: 1px solid #aaaaaa;
	text-decoration: none;
	vertical-align: middle;
}
  #2 (permalink)  
Antiguo 11/04/2008, 12:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Vínculos que parezcan un botón

El vertical align no funciona para esto.

Debes probar a usar line-height, que es la altura de línea, con lo que puedes hacer que el texto se aleje de la parte superior y buscar la medida para simular el centrado vertical.

Tipo line-height: 22px;

Mikel.
  #3 (permalink)  
Antiguo 11/04/2008, 13:02
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 11 meses
Puntos: 0
Re: Vínculos que parezcan un botón

¡Sensacional, Mikel!

Ahora va perfecto.

¡Saludos y muchas gracias!
  #4 (permalink)  
Antiguo 11/04/2008, 13:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Vínculos que parezcan un botón

De nada, es un placer.

Me alegro de que te haya funcionado.

Mikel.
  #5 (permalink)  
Antiguo 11/04/2008, 13:17
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 11 meses
Puntos: 0
Re: Vínculos que parezcan un botón

Bueno, abusando un poco más de vuestra amabilidad os planteo otra pregunta:
¿Es posible relacionar el ancho del botón con la longitud de los diferentes textos y no tener que hacer una clase para cada botón?

Gracias
  #6 (permalink)  
Antiguo 11/04/2008, 13:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Vínculos que parezcan un botón

No entiendo bien la pregunta.

Mikel.
  #7 (permalink)  
Antiguo 11/04/2008, 13:28
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 11 meses
Puntos: 0
Re: Vínculos que parezcan un botón

Es decir, que si la palabra del botón es corta, el botón sea más corto y que si la palabra es más larga, el botón se adapte a esa palabra más larga, manteniendo en ambos casos un padding a derecha e izquierda.
  #8 (permalink)  
Antiguo 11/04/2008, 16:24
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Re: Vínculos que parezcan un botón

solo evita especificar el width de el CSS relacionado??
  #9 (permalink)  
Antiguo 11/04/2008, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Vínculos que parezcan un botón

Exactamente.
  #10 (permalink)  
Antiguo 12/04/2008, 06:00
 
Fecha de Ingreso: enero-2008
Mensajes: 8
Antigüedad: 9 años, 11 meses
Puntos: 0
Re: Vínculos que parezcan un botón

He intentado hacer lo que me decís (eliminar la especificación de width) y lo que ocurre es que el botón se expande a todo el ancho de la página. De todas formas, mi petición ya era una cuestión menor y, en todo caso, aplicaré clases con anchos distintos según los necesite.

Gracias
  #11 (permalink)  
Antiguo 12/04/2008, 07:18
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Vínculos que parezcan un botón

Si aún buscas que se acorte, sácale el display: block y el width.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:57.