Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Botones con css

Estas en el tema de Botones con css en el foro de CSS en Foros del Web. Hola Estoy intentando crear un menú con css pero no me acabao de salir. Como puedo hacer para que me salgan los botones cuadrados uno ...
  #1 (permalink)  
Antiguo 08/01/2014, 16:25
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 0
Botones con css

Hola

Estoy intentando crear un menú con css pero no me acabao de salir.
Como puedo hacer para que me salgan los botones cuadrados uno debajo del otro y que todos tengan la misma longitud?

Código CSS:
Ver original
  1. ul {
  2.   list-style: none;
  3.   margin: 0;
  4.   padding: 0;
  5.   width: 200px;
  6.   height:150px;
  7. }
  8.  
  9. .button{
  10.     background:#0D98FB;
  11.     background-image: -webkit-linear-gradient(top,#0D98FB,#1A5DB3);
  12.     background-image: -moz-linear-gradient(top,#0D98FB,#1A5DB3);
  13.     background-image: -o-linear-gradient(top,#0D98FB,#1A5DB3);  
  14.     background-image: linear-gradient(to bottom,#0D98FB,#1A5DB3);  
  15.     border: 1px solid #125CB5;
  16.     -moz-border-radius: 5px;
  17.     -webkit-border-radius: 5px;
  18.     -o-border-radius: 5px;  
  19.     border-radius: 5px;
  20.     -moz-box-shadow: 0 1px 1px #71C0FD inset;
  21.     -webkit-box-shadow: 0 1px 1px #71C0FD inset;
  22.     -o-box-shadow: 0 1px 1px #71C0FD inset;
  23.     box-shadow: 0 1px 1px #71C0FD inset;
  24.     /*padding: .8em 1.8em;*/
  25.     color: white;
  26.     font-weight:normal;
  27.     text-decoration:none;
  28. }
  29. .button:hover {
  30.     background:#B3FB0D;
  31.     background-image: -webkit-linear-gradient(bottom,#0D98FB,#15498C);
  32.     background-image: -moz-linear-gradient(bottom,#0D98FB,#15498C);
  33.     background-image: -o-linear-gradient(bottom,#0D98FB,#15498C);  
  34.     background-image: linear-gradient(to top,#0D98FB,#15498C);
  35.     cursor: pointer;
  36. }


Código HTML:
Ver original
  1. <ul>
  2.             <li><a title="t1" class="button" href="empresa.php">            T1</a></li>
  3.             <li><a title="T2" class="button" href="empresa.php">T2</a></li>
  #2 (permalink)  
Antiguo 08/01/2014, 19:00
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Botones con css

Pues mira yo cogí tu código y comente los cambios aquí para solucionar tu problema:

http://codepen.io/g3kdigital/pen/zyfxc

Lo único realmente que tuve que hacer: agregarle una altura a las listas.

Aunque yo diría, que los enlaces son a quienes deberías aplicar el estilo de botón y sí tienes problemas para aplicarles, una altura o un ancho, agrégales:

a { display: block; }

Sí no es esto (lo que necesitas) no lo dudes en decir, estaré pendiente. Éxitos!
  #3 (permalink)  
Antiguo 09/01/2014, 02:45
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: Botones con css

Muchas gracias.

El problema era el " a { display: block; } ", ya que si no lo ponía la longitud de cada botón dependía del texto del botón.

Etiquetas: background, botones, color, hover
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 22:27.