Botones redondos y livianos

22/nov/2007 12

Cuando uno toma un diseño, o cuando uno mismo lo está haciendo, llegando la hora de comenzar a armar se deben de tomar varias desiciones que pueden llegar a cambiar partes del mismo. Por ejemplo, cómo estructurarlo, cómo las cajas se van a comportar, cómo la interacción de un menú puede llegar a influenciar el contenido, o proponer dónde aplicar javascript que realice tal o cual acción; enfin. Me ha sucedido que cuando veo un menú con un diseño más que extravagante, el diseñador quien lo realizó no me puede argumentar porqué de ese estilo, por lo que le contraargumento que al construirlo lo que pasará es que quedará más pesado que los estilos del contenido mismo, lo que debiera ser lo principal del sitio (fondos degradados, con texturas o patterns, etc). Como soy diseñador, conozco las causas, motivos, razones y prioridades al momento de diseñar un sitio, y espero que mi opinión sea tomada a cuenta; y de hecho así es. Bueno, finalmente se llega a consenso y se cambia el diseño de esos botones redondo con gradiente para mejor optimización de las imágenes del sitio.

Menú de botones redondos

Pero hay momentos en que así deben de ser, y lo mejor es estar precavido y conocer cómo se puede llegar a optimizar la construcción de un menú completo de bordes redondos. La principal es el ancho variable de cada botón, donde lo que muchos novatos harían sería recortar cada fondo de diferentes anchos y aplicarlo con classes. Es lógico hasta cierto sentido, pero si el menú es largo, o tiende a crecer, y si está presente en varias páginas, no queremos que los cargue siempre. Por lo tanto, con sólo 2 imágenes recortadas lo replicaremos a todos los ítems del menú, independiente del texto que contenga.

La técnica utilizada aquí puede después ser aplicada para muchas otras soluciones, depende de uds. la creatividad de saber dónde y cuándo. Tendremos 2 imágenes: el lado derecho del botón (o comienzo), con el fondo extendido lo bastante para que pueda cubrir todos los anchos de textos, y el izquierdo (o cierre), lo pequeño bastante para cubrir el final del botón.

Safari Firefox Internet Explorer 6 Internet Explorer 7 Opera

Botón lado izquierdo
Botón lado derecho

Lo que haremos es crear un link <a>. En él definiremos el fondo del botón del lado izquierdo, o sea el comienzo del botón. Le damos el alto y ancho del botón. Dentro de este <a> y conteniendo al texto del botón estará un <span>, mediante esta etiqueta le daremos el cierre al botón, el lado derecho, además de otras propiedades como el padding. Traté de ilustrar este método en la siguiente imagen, ojalá sea de ayuda:

Ejemplo botón

Explicado la técnica, procedo al HTML:

<a href="#" class="btn_grande"><span>Bot&oacute;n</span></a>

Y mediante CSS, como es costumbre, haremos la magia:

a, a span {
     background-repeat: no-repeat;
     color: #fff;
     display: block;
}
     a.btn_grande {
          background-image: url(imgs/btn_izq.gif);
          background-position: left top;
          height: 125px;
          text-decoration: none;
          text-shadow: #000 1px 1px 3px;
          letter-spacing: -2px;
          width: 290px;
          text-align: center;
     }
     a.btn_grande span {
          background-image: url(imgs/btn_der.gif);
          background-position: right top;
          height: 100px;
          padding-top: 25px;
          font-size: 65px;
          font-weight: bold;
     }

Para el efecto del :hover, utilizaré la técnica del rollover rápido mostrado en un artículo muy anterior. Es importante notar que el :hover se debe hacer tanto al link como al <span>, ya que son 2 imagenes diferentes que deben moverse:

a.btn_grande:hover {
     background-position: left bottom;
}
a.btn_grande:hover span {
     background-position: right bottom;
}

Ver ejemplo final del botón más grande del mundo.

Comentarios

  1. seba [#]

    Buenisimo!

  2. Nezara [#]

    Excelente!

  3. Sergio [#]

    ¡Mola!

    PD: Por cierto, “decisiones” no desiciones

  4. fearlex [#]

    Buenisimo !!, cabe destacar que este metodo es comunmente llamado en Ingles: Sliding Doors Menues 😀

  5. ddsign [#]

    ¿Habría algo parecido a este estilo pero para utilizar con ?

    Ha estado genial el truco y la explicación;

  6. Roberto [#]

    mhhhh… esta bonito, pero:
    haga Ctrl scroll hacia abajo en Firefox (agrandar el texto) … y el bonito botón… se vuelve inoperante.. he buscado maneras de solucionar esto, pero no veo la luz.

  7. Sebastian [#]

    Muy buen tutorial. Aunque con los span no me llevo mucho.
    Y que pasaría con una lista?. Para hacer un menu horizontal por ejemplo?.
    Saludos

  8. Botones varios con CSS « ddsign [#]

    […] En CSSlab cómo armar un botón escalable de tipo enlace, a […]

  9. ciber [#]

    Roberto
    12.13.07 / 11am

    mhhhh… esta bonito, pero:
    haga Ctrl scroll hacia abajo en Firefox (agrandar el texto) … y el bonito botón… se vuelve inoperante.. he buscado maneras de solucionar esto, pero no veo la luz.

    R: con ems???

    —–

    ¿Oye, y como haces que el IE 6 pesque el hover del span?

  10. Jorge [#]

    Hola, estoy tratando de aplicar esto a un menú solo que en lugar de botones son pestañas (tabs) al fin de cuentas es lo mismo, pero tengo 3 problemas, espero alguien pueda arrojarme algo de luz al respecto:
    1 La etiqueta no me respeta la propiedad “height”.
    2 La etiqueta no cambia de imagen de fonto con el la propiedad “hover”.
    3 (esto solo en IE) como saben ie tiene problemas con la propiedad witdh:auto; que la pone del 100% de la pagina en lugar de adaptarse automaticamente al ancho de su contenido ¿alguien sabe algun hack para resolver esto en IE?

    Mi código css es el aiguiente:

    /*Tabs menu*/
    #menu{width:960px;float: left; height:42px;margin:0;padding-left:34px;background:url(‘../img/mbg.png’);border-top:1px solid #96824f;border-left:1px solid #96824f;}
    #navTab{
    position:relative;
    height:28px;
    float:left;
    margin-top:14px;
    margin-left:-10px;
    list-style-type:none;
    font-size:12px;
    }
    #navTab a{
    display: block;
    padding:0px 0 0px 15px;
    height:27px;
    margin:0;
    background: url(../img/tab_left.gif) no-repeat left top;
    color:#96824f;
    }
    #navtab a:visited{color:#96824f}
    #navTab span{
    height: 27px;
    padding:1px 15px 9px 0;
    background: url(../img/tab_right.gif) no-repeat right top;
    }
    #navTab a:hover{
    background: url(../img/tab_hover_left.gif) no-repeat left top;
    text-decoration:none;
    }
    #navtab a:hover span{
    background: url(../img/tab_hover_right.gif) no-repeat right top;
    }
    #navTab.current a{
    background: url(../img/tab_current_left.gif) no-repeat left top;
    }
    #navTab.current span{
    background: url(../img/tab_current_right.gif) no-repeat right top;
    }
    /*Fin Tabs menu*/

  11. Jorge [#]

    Aclaracion: sonde dice “la etiqueta” deberia decir “la etiqueta span” lo que pasa es que la puse entre los signos y no sabia que los comentarios aceptaban html y lo interpreto como una etiqueta de código no imprimible.

  12. marco [#]

    ESto no sirve, por que no hacerlo con una sola imagen ya que el borde de la derecha es innecesario, la idea de esto es que pueda crecer junto al tamaño del link.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab