Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 36 vistas

    Guía Rápida para Estilos CSS en Botones

    Cargado por

    Lupita Diaz

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Guía Rápida para Estilos CSS en Botones

    Cargado por

    Lupita Diaz
    36 vistas10 páginas

    Título original

    Guía Rápida Para Estilos CSS en Botones

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    36 vistas10 páginas

    Guía Rápida para Estilos CSS en Botones

    Cargado por

    Lupita Diaz

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 10

    Guía rápida para estilos CSS en botones

    Los botones se han convertido en una parte imprescindible del


    desarrollo de frontales. Por tanto, es importante tener en cuenta
    varías cosas antes de dar estilo a los botones. He reunido algunas de
    las maneras de darles estilo usando CSS. Podemos combinar también
    la mayoría de métodos para crear un nuevo estilo. Para crear CSS
    para degradados, podemos usar https://uigradients.com.

    Un sencillo botón «Primeros pasos»

    1.btn {
    2
    3background: #eb94d0;

    /* Crear degradados */

    1 background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0);


    2 background-image: -moz-linear-gradient(top, #eb94d0, #2079b0);
    3 background-image: -ms-linear-gradient(top, #eb94d0, #2079b0);
    4 background-image: -o-linear-gradient(top, #eb94d0, #2079b0);
    5 background-image: linear-gradient(to bottom, #eb94d0, #2079b0);

    /* Dar bordes curvados a btn */

    1 -webkit-border-radius: 28;
    2 -moz-border-radius: 28;
    3 border-radius: 28px;
    4
    5 text-shadow: 3px 2px 1px #9daef5;
    6 -webkit-box-shadow: 6px 5px 24px #666666;
    7 -moz-box-shadow: 6px 5px 24px #666666;
    8 box-shadow: 6px 5px 24px #666666;
    9
    10font-family: Arial;
    11 color: #fafafa;
    12 font-size: 27px;
    13 padding: 19px;
    14 text-decoration: none;
    15}

    /* Al poner el curso encima (hover) */

    1 .btn:hover {
    2
    3 background: #2079b0;
    4
    5 background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0);
    6 background-image: -moz-linear-gradient(top, #2079b0, #eb94d0);
    7 background-image: -ms-linear-gradient(top, #2079b0, #eb94d0);
    8 background-image: -o-linear-gradient(top, #2079b0, #eb94d0);
    9 background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
    10
    11 text-decoration: none;
    12}

    Botón con fondo transparente

    1.btn {

    /* Color del texo */

    1color: #0099CC;

    /* Eliminar color de fondo */

    1background: transparent;

    /* Grosor del borde, estilo de línea y color */

    1border: 2px solid #0099CC;

    /* Añadir esquinas curvadas */


    1border-radius: 6px;

    /* Poner texto en mayúsculas */

    1 border: none;
    2 color: white;
    3 padding: 16px 32px;
    4 text-align: center;
    5 display: inline-block;
    6 font-size: 16px;
    7 margin: 4px 2px;
    8 -webkit-transition-duration: 0.4s; /* Safari */
    9 transition-duration: 0.4s;
    10 cursor: pointer;
    11 text-decoration: none;
    12 text-transform: uppercase;
    13}
    14.btn1 {
    15 background-color: white;
    16 color: black;
    17 border: 2px solid #008CBA;
    18}

    /* Al poner el curso encima (hover) */

    1.btn1:hover {
    2 background-color: #008CBA;
    3 color: white;
    4}

    Botón con entidades CSS

    Puedes encontrar el listado completo de entidades CSS aquí (en


    inglés)
    https://www.w3schools.com/cssref/css_entities.asp
    También puedes usar entidades HTML, pero están limitadas.
    https://www.w3schools.com/html/html_entities.asp
    1 .button {
    2 display: inline-block;
    3 border-radius: 4px;
    4 background-color: #f4511e;
    5 border: none;
    6 color: #FFFFFF;
    7 text-align: center;
    8 font-size: 28px;
    9 padding: 20px;
    10 width: 200px;
    11 transition: all 0.5s;
    12 cursor: pointer;
    13 margin: 5px;
    14}
    15
    16.button span {
    17 cursor: pointer;
    18 display: inline-block;
    19 position: relative;
    20 transition: 0.5s;
    21}
    22
    23.button span:after {
    24
    25content: '\00bb'; /* Entidades CSS. Para usar entidades HTML, use →*/
    26
    27position: absolute;
    28 opacity: 0;
    29 top: 0;
    30 right: -20px;
    31 transition: 0.5s;
    32}
    33
    34.button:hover span {
    35 padding-right: 25px;
    36}
    37
    38.button:hover span:after {
    39 opacity: 1;
    40 right: 0;
    41}
    Botón con animación al hacer clic

    CSS: (SCSS)

    1 $gray: #bbbbbb;
    2
    3 *{
    4 font-family: 'Roboto', sans-serif;
    5 }
    6
    7 .container {
    8 position: absolute;
    9 top:50%;
    10 left:50%;
    11 margin-left: -65px;
    12 margin-top: -20px;
    13 width: 130px;
    14 height: 40px;
    15 text-align: center;
    16 }
    17
    18 .btn {
    19 color: #0099CC; /*Color texto */
    20 background: transparent; /* Eliminar color de fondo */
    21 border: 2px solid #0099CC; /* Ancho de borde, estilo de línea y color */
    22 border-radius: 70px; /* Esquinas redondeadas */
    23 text-decoration: none;
    24 text-transform: uppercase; /* Mayúsculas */
    25 border: none;
    26 color: white;
    27 padding: 16px 32px;
    28 text-align: center;
    29 text-decoration: none;
    30 display: inline-block;
    31 font-size: 16px;
    32 margin: 4px 2px;
    33 -webkit-transition-duration: 0.4s; /* Safari */
    34 transition-duration: 0.4s;
    35 cursor: pointer;
    36 }
    37 .btn1 {
    38 background-color: white;
    39 color: black;
    40 border: 2px solid #008CBA;
    41 }
    42 .btn1:hover {
    43 background-color: #008CBA;
    44 color: white;
    45 }
    46
    47 b {
    48 outline:none;
    49 height: 40px;
    50 text-align: center;
    51 width: 130px;
    52 border-radius:100px;
    53 background: #fff;
    54 border: 2px solid #008CBA;
    55 color: #008CBA;
    56 letter-spacing:1px;
    57 text-shadow:0;
    58 font:{
    59 size:12px;
    60 weight:bold;
    61 }
    62 cursor: pointer;
    63 transition: all 0.25s ease;
    64
    65 &:active {
    66 letter-spacing: 2px ;
    67 }
    68 &:after {
    69 content:"";
    70 }
    71 }
    72 .onclic {
    73 width: 10px !important;
    74 height: 70px !important;
    75 border-radius: 50% !important;
    76 border-color:$gray;
    77 border-width:4px;
    78 font-size:0;
    79 border-left-color: #008CBA;
    80 animation: rotating 2s 0.25s linear infinite;
    81 &:hover {
    82 color: dodgerblue;
    83 background: white;
    84 }
    85 }
    86 .validate {
    87 content:"";
    88 font-size:16px;
    89 color: black;
    90 background: dodgerblue;
    91 border-radius: 50px;
    92 &:after {
    93 font-family:'FontAwesome';
    94 content:" done \f00c";
    95 }
    96 }
    97
    98 @keyframes rotating {
    99 from {
    100 transform: rotate(0deg);
    101 }
    102 to {
    103 transform: rotate(360deg);
    104 }
    105}

    Javascript: (JQuery)
    1 $(function() {
    2 $("#button").click(function() {
    3 $("#button").addClass("onclic", 250, validate);
    4 });
    5
    6 function validate() {
    7 setTimeout(function() {
    8 $("#button").removeClass("onclic");
    9 $("#button").addClass("validate", 450, callback);
    10 }, 2250);
    11 }
    12 function callback() {
    13 setTimeout(function() {
    14 $("#button").removeClass("validate");
    15 }, 1250);
    16 }
    17});

    Botón con imagen

    1 .btn {
    2
    3 background: #92c7eb;
    4 background-image: url(“http://res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-
    5 pv.png");
    6 background-size: cover;
    7 background-position: center;
    8 display: inline-block;
    9 border: none;
    10 padding: 20px;
    11 width: 70px;
    12 border-radius: 900px;
    13 height: 70px;
    14 transition: all 0.5s;
    15 cursor: pointer;
    16}
    17.btn:hover
    18{
    19 width: 75px;
    20 height: 75px;
    }

    Botones con iconos

    index.html
    1<div class="main"><button class="button" style="vertical-align:middle"><a href="#" class="icon-button
    2twitter"><i class="icon-twitter"></i><span></span></button></a>
    3 <div class="text"><strong>TWEET!</strong></div>
    </div>

    style.css

    1 button{
    2 border: none;
    3 border-radius: 50px;
    4 }
    5 html,
    6 body {
    7 font-size: 20px;
    8 min-height: 100%;
    9 overflow: hidden;
    10 font-family: "Helvetica Neue", Helvetica, sans-serif;
    11
    12 text-align: center;
    13 }
    14 .text {
    15 padding-top: 50px;
    16 font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    17
    18 }
    19 .text:hover
    20 {
    21 cursor: pointer;
    22 color: #1565C0;
    23 }
    24 .main {
    25 padding: 0px 0px 0px 0px;
    26 margin: 0;
    27 background-image: url("https://someimg");
    28 text-align: center;
    29 background-size: 100% !important;
    30 background-repeat: no-repeat;
    31 width: 900px;
    32 height: 700px;
    33
    34 }
    35
    36 .icon-button {
    37 background-color: white;
    38 border-radius: 3.6rem;
    39 cursor: pointer;
    40 display: inline-block;
    41 font-size: 2rem;
    42 height: 3.6rem;
    43 line-height: 3.6rem;
    44 margin: 0 5px;
    45 position: relative;
    46 text-align: center;
    47 -webkit-user-select: none;
    48 -moz-user-select: none;
    49 -ms-user-select: none;
    50 user-select: none;
    51 width: 3.6rem;
    52 }
    53
    54
    55 .icon-button span {
    56 border-radius: 0;
    57 display: block;
    58 height: 0;
    59 left: 50%;
    60 margin: 0;
    61 position: absolute;
    62 top: 50%;
    63 -webkit-transition: all 0.3s;
    64 -moz-transition: all 0.3s;
    65 -o-transition: all 0.3s;
    66 transition: all 0.3s;
    67 width: 0;
    68 }
    69 .icon-button:hover span {
    70 width: 3.6rem;
    71 height: 3.6rem;
    72 border-radius: 3.6rem;
    73 margin: -1.8rem;
    74 }
    75 .twitter span {
    76 background-color: #4099ff;
    77 }
    78
    79 /* Icons */
    80 .icon-button i {
    81 background: none;
    82 color: white;
    83 height: 3.6rem;
    84 left: 0;
    85 line-height: 3.6rem;
    86 position: absolute;
    87 top: 0;
    88 -webkit-transition: all 0.3s;
    89 -moz-transition: all 0.3s;
    90 -o-transition: all 0.3s;
    91 transition: all 0.3s;
    92 width: 3.6rem;
    93 z-index: 10;
    94 }
    95 .icon-button .icon-twitter {
    96 color: #4099ff;
    97 }
    98
    99 .icon-button:hover .icon-twitter {
    100 color: white;
    101}

    Conclusión

    También podría gustarte