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

Esta entrada fue publicada el a las Miércoles 6 de Junio de 2007 y está archivada bajo las categorías Botones, CSS. Puedes seguir las respuestas de esta entrada a través de sindicación RSS 2.0. Puedes dejar una respuesta, o trackback desde tu propio sitio.

5 comentarios para “Como hacer botones con buena apariencia con CSS”

  1. Enisla Dice:
    13, Mayo, 2008 a las 8:35 am | Responder

    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..

  2. perolito Dice:
    14, Julio, 2008 a las 2:04 pm | Responder

    fggdfgfdgdfgdf

  3. Juan Josè Chirino Dice:
    28, Julio, 2008 a las 3:36 am | Responder

    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…..

  4. Sasha Kodima Dice:
    2, Abril, 2009 a las 10:41 pm | Responder

    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.

  5. IMPRESCINDIBLES « DIGITALES PARA EL AULA Dice:
    20, Mayo, 2009 a las 6:00 pm | Responder

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

Escribe un comentario