Si hay alguien leyendo este blog a quien no haya insultado... me disculpo.
« Meme: 8 aspectos de mi vida
Pseudo-clases en IE6- »

Botones en CSS

Martes 29 de Mayo del 2007 Compártelo

Páginas: 1 2 3

El HTML

Vamos a aplicar esto a nuestra página. El HTML no es gran ciencia, simplemente utiliza tus <a>'s, <inputs>'s y/o <button>'s de manera normal y agregales clases. Para este tutorial usaré 2 clases por elemento: una que le diga que se trata de un botón de este tipo (box-link) y otra que le diga el color y el tamaño de dicho boton (color-tamaño):

TEXTO PLANO
HTML:
  1. <a href="#" class="box-link negro-210">Negro</a>
  2. <input class="box-link azul-160" type="submit" value="Input" />
  3. <button class="box-link verde-110" type="submit">Button</button>

En el ejemplo les pongo un ejemplo para cada uno de los elementos que les dije. Ahora vamos con el CSS.

El CSS

Vamos a empezar con la clase box-link. Vamos a darle estilo a nuestras tags. Tenemos que mostrar el elemento como un bloque, quitarle estilos que ya tenga por default (bordes, por ejemplo) y darle estilo a nuestra fuente:

TEXTO PLANO
CSS:
  1. a.box-link:link, a.box-link:visited {
  2.         display: block;
  3.         margin: 10px auto;
  4.         height: 40px;
  5.         font-weight: bold;
  6.         font-size: 15pt;
  7.         line-height: 40px;
  8.         text-align: center;
  9.         border-bottom: 0   
  10.     }
  11.  
  12.     input.box-link, button.box-link {
  13.         display: block;
  14.         margin: 10px auto;
  15.         border: 0;
  16.         height: 40px;
  17.         font-weight: normal;
  18.         font-size: 15pt;
  19.         line-height: 40px;
  20.         text-align: center;
  21.         color: #fff;
  22.         border-bottom: 0
  23.     }

Como ven, dividí el CSS para los hipervínculos y otro para el input y el button. Esto es solo por razones didácticas, no se fijen. Ahora solo vamos a agregar las clases para los colores/tamaños correspondientes. En estas clases solo vamos a agregar el color e imagen de fondo.

TEXTO PLANO
CSS:
  1. .negro-210:link, .negro-210:visited {
  2.         width: 210px;
  3.         background: #000 url('negro-210x40.jpg') no-repeat top left;
  4.         color: #fff
  5.     }
  6.  
  7.     input.azul-160 {
  8.         width: 160px;
  9.         background: #09c url('azul-160x40.jpg') no-repeat top left;
  10.         color: #fff
  11.     }
  12.  
  13.     button.verde-110 {
  14.         width: 110px;
  15.         background: #81b638 url('verde-110x40.jpg') no-repeat top left;
  16.         color: #fff
  17.     }

Ya con eso tenemos unos bonitos links en cuadro, podemos agregar efectos al pasar el mouse encima (:hover); pero como son botones clickeables, preferí darles un estilo al dar click en ellos. Para esto usaremos la pseudo-clase :active que, lamentablemente, IE no soporta en los <inputs>'s ni en los <button>'s. Jodido IE. En fin; vamos a darle estilo a los demás:

TEXTO PLANO
CSS:
  1. /* Empezemos con los anchors */
  2. a.box-link:active, input.box-link:active {
  3.     background-position: 0 -40px;
  4.     line-height: 43px;
  5.     text-indent: 3px
  6. }
  7.  
  8. a.negro-210:active {color: #999}
  9.  
  10. /* Ahora vamos con los input y los button */
  11. input.box-link:active, button.box-link:active {
  12.     background-position: 0 -40px;
  13.     line-height: 43px;
  14.     text-indent: 3px
  15. }
  16.  
  17. input.azul-160:active {color: #98e8fc}
  18. button.verde-110:active {color: #dff178}

Lo que estamos haciendo es cambiar el color del botón y mover la imagen de fondo 40 pixeles hacia arriba así como mover el texto 3 pixeles a la derecha y 3 hacia abajo. Internet Explorer no cambiará de posición el fondo en los buttons o en los inputs; pero si moverá el texto 3 pixeles a la derecha, por lo que siguen quedando avisados los usuarios de este navegador que dieron click en ellos. Por accesibilidad no hay problema, por diseño si; pero al final lo importante queda intacto.

Por último y para variar, Internet Explorer 6 o menos tiene un pequeño bug que teine que ver con el line-height: 43px;. Lo que hace IE es hacer el contenedor de 43px de alto, mostrando parte del fondo que no debiera mostrarse. Así que, con el uso de comentarios condicionales tuve que agregar esto:

TEXTO PLANO
HTML:
  1. <!--[if lte IE 6]>
  2. <style type="text/css">
  3. /* Arreglando bug en IE */
  4.     a.box-link:active, input.box-link:active {
  5.         line-height: 37px;
  6.         padding-top: 3px;
  7.         height: 37px
  8.     }
  9. </style>
  10. <![endif]-->

Eso es todo para nuestros links. Agregando algunas clases más y usando todas las imagenes he creado un bonito demo con todas las tags arriba, además de todos los colores y tamaños. Les dejo el CSS completo aquí. Con este CSS pueden usar todos los colores y tamaños como lo hice en el demo:

TEXTO PLANO
CSS:
  1. /* Divs de alineación */
  2. div.izquierda {
  3.     width: 49%;
  4.     margin: 20px 0 30px 0;
  5.     float: left;
  6.     clear: left;
  7.     text-align: center
  8. }
  9.  
  10. div.derecha {
  11.     width: 49%;
  12.     margin: 20px 0 30px 0;
  13.     float: left;
  14.     text-align: center
  15. }
  16.  
  17. /* General links */
  18.     a.box-link:link, a.box-link:visited, input.box-link {
  19.         display: block;
  20.         margin: 10px auto;
  21.         height: 40px;
  22.         font-weight: bold;
  23.         font-size: 15pt;
  24.         line-height: 40px;
  25.         text-align: center;
  26.         border-bottom: 0   
  27.     }
  28.    
  29.     /* Clickeando */
  30.         a.box-link:active, input.box-link:active {
  31.             background-position: 0 -40px;
  32.             line-height: 43px;
  33.             text-indent: 3px
  34.         }
  35.        
  36.         a.negro-210:active, a.negro-160:active, a.negro-110:active {color: #999}
  37.         a.azul-210:active, a.azul-160:active, a.azul-110:active {color: #98e8fc}
  38.         a.verde-210:active, a.verde-160:active, a.verde-110:active {color: #dff178}
  39.         a.amarillo-210:active, a.amarillo-160:active, a.amarillo-110:active {color: #ffec82}
  40.    
  41. /* Tamaños */
  42. /* 210x40 */
  43.     .negro-210:link, .negro-210:visited {
  44.         width: 210px;
  45.         background: #000 url('negro-210x40.jpg') no-repeat top left;
  46.         color: #fff
  47.     }
  48.        
  49.     .azul-210:link, .azul-210:visited {
  50.         width: 210px;
  51.         background: #09c url('azul-210x40.jpg') no-repeat top left;
  52.         color: #fff
  53.     }
  54.  
  55.     .verde-210:link, .verde-210:visited {
  56.         width: 210px;
  57.         background: #81b638 url('verde-210x40.jpg') no-repeat top left;
  58.         color: #fff
  59.     }
  60.    
  61.     .amarillo-210:link, .amarillo-210:visited {
  62.         width: 210px;
  63.         background: #e6a800 url('amarillo-210x40.jpg') no-repeat top left;
  64.         color: #fff
  65.     }
  66.    
  67. /* 160x40 */
  68.     .negro-160:link, .negro-160:visited {
  69.         width: 160px;
  70.         background: #000 url('negro-160x40.jpg') no-repeat top left;
  71.         color: #fff
  72.     }
  73.        
  74.     .azul-160:link, .azul-160:visited {
  75.         width: 160px;
  76.         background: #09c url('azul-160x40.jpg') no-repeat top left;
  77.         color: #fff
  78.     }
  79.  
  80.     .verde-160:link, .verde-160:visited {
  81.         width: 160px;
  82.         background: #81b638 url('verde-160x40.jpg') no-repeat top left;
  83.         color: #fff
  84.     }
  85.    
  86.     .amarillo-160:link, .amarillo-160:visited {
  87.         width: 160px;
  88.         background: #e6a800 url('amarillo-160x40.jpg') no-repeat top left;
  89.         color: #fff
  90.     }
  91.    
  92. /* 110x40 */
  93.     .negro-110:link, .negro-110:visited {
  94.         width: 110px;
  95.         background: #000 url('negro-110x40.jpg') no-repeat top left;
  96.         color: #fff
  97.     }
  98.        
  99.     .azul-110:link, .azul-110:visited {
  100.         width: 110px;
  101.         background: #09c url('azul-110x40.jpg') no-repeat top left;
  102.         color: #fff
  103.     }
  104.  
  105.     .verde-110:link, .verde-110:visited {
  106.         width: 110px;
  107.         background: #81b638 url('verde-110x40.jpg') no-repeat top left;
  108.         color: #fff
  109.     }
  110.    
  111.     .amarillo-110:link, .amarillo-110:visited {
  112.         width: 110px;
  113.         background: #e6a800 url('amarillo-110x40.jpg') no-repeat top left;
  114.         color: #fff
  115.     }
  116.  
  117. /* Formularios */
  118. /* General */
  119.     input.box-link, button.box-link {
  120.         display: block;
  121.         margin: 10px auto;
  122.         border: 0;
  123.         height: 40px;
  124.         font-weight: normal;
  125.         font-size: 15pt;
  126.         line-height: 40px;
  127.         text-align: center;
  128.         color: #fff;
  129.         border-bottom: 0
  130.     }
  131.    
  132.     /* Clickeando */
  133.         input.box-link:active, button.box-link:active {
  134.             background-position: 0 -40px;
  135.             line-height: 43px;
  136.             text-indent: 3px
  137.         }
  138.        
  139.         input.negro-210:active, input.negro-160:active, input.negro-110:active,
  140.         button.negro-210:active, button.negro-160:active, button.negro-110:active
  141.         {color: #999}
  142.        
  143.         input.azul-210:active, input.azul-160:active, input.azul-110:active,
  144.         button.azul-210:active, button.azul-160:active, button.azul-110:active
  145.         {color: #98e8fc}
  146.        
  147.         input.verde-210:active, input.verde-160:active, input.verde-110:active,
  148.         button.verde-210:active, button.verde-160:active, button.verde-110:active      
  149.         {color: #dff178}
  150.        
  151.         input.amarillo-210:active, input.amarillo-160:active, input.amarillo-110:active,
  152.         button.amarillo-210:active, button.amarillo-160:active, button.amarillo-110:active
  153.         {color: #ffec82}
  154.    
  155. /* 210x40 */
  156.     input.negro-210, button.negro-210 {
  157.         width: 210px;
  158.         background: #000 url('negro-210x40.jpg') no-repeat top left;
  159.         color: #fff
  160.     }
  161.        
  162.     input.azul-210, button.azul-210 {
  163.         width: 210px;
  164.         background: #09c url('azul-210x40.jpg') no-repeat top left;
  165.         color: #fff
  166.     }
  167.  
  168.     input.verde-210, button.verde-210 {
  169.         width: 210px;
  170.         background: #81b638 url('verde-210x40.jpg') no-repeat top left;
  171.         color: #fff
  172.     }
  173.    
  174.     input.amarillo-210, button.amarillo-210 {
  175.         width: 210px;
  176.         background: #e6a800 url('amarillo-210x40.jpg') no-repeat top left;
  177.         color: #fff
  178.     }
  179.    
  180. /* 160x40 */
  181.     input.negro-160, button.negro-160 {
  182.         width: 160px;
  183.         background: #000 url('negro-160x40.jpg') no-repeat top left;
  184.         color: #fff
  185.     }
  186.        
  187.     input.azul-160, button.azul-160 {
  188.         width: 160px;
  189.         background: #09c url('azul-160x40.jpg') no-repeat top left;
  190.         color: #fff
  191.     }
  192.  
  193.     input.verde-160, button.verde-160 {
  194.         width: 160px;
  195.         background: #81b638 url('verde-160x40.jpg') no-repeat top left;
  196.         color: #fff
  197.     }
  198.    
  199.     input.amarillo-160, button.amarillo-160 {
  200.         width: 160px;
  201.         background: #e6a800 url('amarillo-160x40.jpg') no-repeat top left;
  202.         color: #fff
  203.     }
  204.    
  205. /* 110x40 */
  206.     input.negro-110, button.negro-110 {
  207.         width: 110px;
  208.         background: #000 url('negro-110x40.jpg') no-repeat top left;
  209.         color: #fff
  210.     }
  211.        
  212.     input.azul-110, button.azul-110 {
  213.         width: 110px;
  214.         background: #09c url('azul-110x40.jpg') no-repeat top left;
  215.         color: #fff
  216.     }
  217.  
  218.     input.verde-110, button.verde-110 {
  219.         width: 110px;
  220.         background: #81b638 url('verde-110x40.jpg') no-repeat top left;
  221.         color: #fff
  222.     }
  223.    
  224.     input.amarillo-110, button.amarillo-110 {
  225.         width: 110px;
  226.         background: #e6a800 url('amarillo-110x40.jpg') no-repeat top left;
  227.         color: #fff
  228.     }

Espero les sea de utilidad. Luego me meto un poco más con los formularios, que tenemos muchos elementos que podemos estilizar. ;)

Por cierto, no está de más enlazar a esta entrada de anieto2k, en donde discute el si usar <button> (Que es semánticamente correcto) o <input> (Que es Internet-Explorer correcto... ).

Páginas: 1 2 3

Posts relacionados:

7 Comentarios

  1. #1 gravatar Chicoblog 29 de Mayo del 2007, 16:52

    Jooo!!!

    esta genial!

    lo pondre a prueba cuando vuelva a subir mi sitio =)

    saludos y muchas gracias por este genial post =D

  2. #2 gravatar Sebas 29 de Mayo del 2007, 20:52

    Simplemente genial.

    felicitanes, relamente unmuy buen rtrabajo en diseño e implementacion

    salud2

  3. #3 gravatar Toni 30 de Mayo del 2007, 4:39

    Muy bueno el artículo, es practico que es, me ha sido de gran ayuda, muchas gracias.
    Salud.

  4. #4 gravatar ko(onem 30 de Mayo del 2007, 10:36

    Wow! Bonitos los diseños

    Lo aplicare en mi formulario de contacto

    Gracias!

  5. #5 gravatar J.v.C 21 de Junio del 2007, 8:22

    Muy buen aporte, lo usare en mi web :D gracias!
    saludos desde méxico

  6. #6 gravatar Chrono 27 de Julio del 2007, 16:08

    Excelente articulo, estaria genial que pusieras mas tutos de fireworks :D

  7. #7 gravatar th3r0rn 7 de Octubre del 2007, 2:54

    Olle podrias dejar la descarga de los botones?

Dejar un comentario

* Campos requeridos
   El Email no será publicado

« Meme: 8 aspectos de mi vida
Pseudo-clases en IE6- »