Como hacer botones con buena apariencia con CSS

En ZONA MASTERS, nos dan un enlace a un tutorial (en inglés), donde aprenderemos a usar una sola imagen para crear botones con diferentes estados (presionado y sin presionar) es la técnica llamada sliding doors (puerta corrediza)

imegen

This entry was posted on miércoles, 6 de junio de 2007 at 9:52 am and is filed under Botones, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to Como hacer botones con buena apariencia con CSS

  1. Enisla dice:
    13, May, 2008 a las 8:35 am

    Excelente,, esta muy sencillo y justo lo que estaba buscando gracias por el dato, en mi caso los necesito azules, pero cambiando los gif queda solucionado..

    Responder
  2. perolito dice:
    14, julio, 2008 a las 2:04 pm

    fggdfgfdgdfgdf

    Responder
  3. Juan Josè Chirino dice:
    28, julio, 2008 a las 3:36 am

    Aportando datos para tener muy en cuenta, en este ejemplo usando VIÑETAS Texto donde establecer la propiedad class de la siguiente menera , la propiedad class en UL es igual a la que escribes en CSS .propiedadclass{comando: propiedad;}

    Aqui esta el ejemplo en modo COLUMNA

    CSS – Codigo

    #estilo_sin_borde_celeste{
    list-style:none;
    margin:0;
    padding:0;
    height:21px;
    font-family:Tahoma;
    font-size:10px;
    }

    #estilo_sin_borde_celeste li{
    margin:0px;
    padding:0;
    float:left;
    color:Black;
    }

    #estilo_sin_borde_celeste li a{
    display: block;
    width: 130px;
    height: 18px;
    padding: 4px;
    text-decoration: none;
    text-align: center;
    color: Black;
    background-color: #B6CCF3;
    }

    #estilo_sin_borde_celeste li a:hover{
    color: #E2EBF8;
    background-color: #2358B6;
    }
    #estilo_sin_borde_celeste li a:visited{
    color: #FFFFF0;
    background-color: #224D8A;
    }

    En HTML Codigo

    Texto

    Soy Juanjo de Lomas de Zamora de Argentina, espero que este ejemplo te ayude.

    P.D.:

    Aplica este mismo ejemplo en la etiqueta cambia la propiedad Class=»» y te aparecera en HTML el efecto de manera Vertical.

    #estilo_con_borde_celeste_suave ul{
    list-style:none;
    margin:0;
    padding:0;
    height:21px;
    font-family:Tahoma;
    font-size:10px;
    }
    #estilo_con_borde_celeste_suave li{
    list-style:none;
    margin: 0px;
    padding: 0;
    color: Black;
    border: 2px groove #04385A;
    }
    #estilo_con_borde_celeste_suave li a{
    width: 100%;
    padding: 2px;
    display: block;
    text-decoration: none;
    color: Black;
    background-color: #87CEFA;
    }
    #estilo_con_borde_celeste_suave li a:hover{
    color: White;
    background-color: #045B93;
    }
    #estilo_con_borde_celeste_suave li a:visited{
    color: White;
    background-color: #04385A;
    }

    Ahora si, hasta pronto…..

    Responder
  4. Sasha Kodima dice:
    2, abril, 2009 a las 10:41 pm

    Muy bueno, este tipo de botones se ajustan al texto, no lo habia visto en otro lado. Lo unico malo es que no usa el tag input para el boton, por lo que no podremos cabiarlo rapidamente para las webs ya creadas, tal vez usando javascript podremos hacerlo.

    Responder
  5. IMPRESCINDIBLES « DIGITALES PARA EL AULA dice:
    20, May, 2009 a las 6:00 pm

    […] Como hacer botones con buena apariencia con CSS […]

    Responder

Deja un comentario