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

Anuncios

5 Responses to Como hacer botones con buena apariencia con CSS

  1. Enisla dice:

    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:

    fggdfgfdgdfgdf

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

    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. […] Como hacer botones con buena apariencia con CSS […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: