Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Botones Css

    Încărcat de

    bruxotolo
    20 vizualizări3 pagini
    Como crear botones CSS

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Como crear botones CSS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    20 vizualizări3 pagini

    Botones Css

    Încărcat de

    bruxotolo
    Como crear botones CSS

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 3

    Los pasos para crear tus botones

    personalizados.
    El cdigo HTML5

    Para crear nuestros botones personalizados lo primero que debemos hacer es teclear el
    cdigo HTML5, el cual deberemos colocarlo all donde queramos ubicar nuestro botn.
    utilizaremos el elemento <a> el cual tambin tiene estilo por defecto pero resulta mucho
    ms manejable.
    Cdigo:
    <a class="boton_personalizado" href="https://vinkula.com">Soy un
    1
    botn</a>
    Explicacin:
    En el atributo href, donde he colocado https://vinkula.com, debes sustituirlo por la ruta a la
    que quieres dirigir el botn.
    En el atributo class donde he escrito boton_personalizado puedes escribir cualquier nombre
    que le quieras asignar a la clase.
    Recuerda mantener las comillas .
    El cdigo CSS3

    Ahora que ya hemos creado nuestro botn, toca personalizar su aspecto a travs del cdigo
    CSS3. Este cdigo debes pegarlo entre las etiquetas <head> y </head> de tu documento
    HTML. Tambin puedes utilizar hojas css. Debemos tener en cuenta que deberemos crear
    la clase con el nombre que le hemos asignado al atributo class en nuestro cdigo HTML5.
    Cdigo:
    1<style type="text/css">
    2 .boton_personalizado{
    3 text-decoration: none;
    4 padding: 10px;
    5 font-weight: 600;
    6 font-size: 20px;
    7 color: #ffffff;
    8 background-color: #1883ba;
    9 border-radius: 6px;
    1 border: 2px solid #0016b0;
    0 }
    1</style>
    1
    1
    2
    Explicacin:
    Text-decoration se refiere a la decoracin del texto, deberemos establecerlo en none a no
    ser que queramos tener el texto del botn subrayado.
    Padding es la distancia entre el texto y el borde del botn. En este caso est establecido en
    pixeles.
    Font-wheight se trata del grosor de las letras. Mientras ms alto sea su nmero, ms
    gruesas sern.
    Font-size es el tamao se la letra, en este caso, tambin en pixeles.
    Color se refiere al color de la letra. Podremos personalizarlo fcilmente con un cdigo HEX,
    RGB o incluso RGBA.
    Background-color es el color de fondo del botn.
    Border-radius se trata del redondeado de los cantos de botn. Mientras ms pixeles
    asignemos, ms redondeados sern los bordes. Si, lo que queremos es un botn sin bordes
    redondeados, lo eliminaremos.
    Border es del borde del botn. Podremos asignar un grosor en pixeles y un color.
    El hover

    Ahora falta definir qu ocurre cuando pasamos el ratn por encima de nuestro botn, esto
    lo haremos asignndole un hover a nuestra clase. Por lo que nuestro cdigo CSS3 quedara
    as.
    Cdigo:
    1
    2
    3
    4<style type="text/css">
    5 .boton_personalizado{
    6 text-decoration: none;
    7 padding: 10px;
    8 font-weight: 600;
    9 font-size: 20px;
    1 color: #ffffff;
    0
    background-color: #1883ba;
    1
    border-radius: 6px;
    1
    border: 2px solid #0016b0;
    1
    }
    2
    1 .boton_personalizado:hover{
    3 color: #1883ba;
    1 background-color: #ffffff;
    4 }
    1</style>
    5
    1
    6
    Explicacin:
    Dentro del hover colocaremos todo aquello que queremos que se modifiquen al pasar el
    ratn por encima con los valores que queremos establecer.

    S-ar putea să vă placă și