{"id":1420,"date":"2024-08-01T19:55:56","date_gmt":"2024-08-01T17:55:56","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1420"},"modified":"2024-08-01T19:55:57","modified_gmt":"2024-08-01T17:55:57","slug":"14-botones-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/14-botones-css\/","title":{"rendered":"14. Botones CSS"},"content":{"rendered":"\n

Veamos un primer ejm de un bot\u00f3n dot\u00e1ndole de estilo CSS.<\/p>\n\n\n\n\n\n\n\n


Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: #4caf50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    <\/style>
  <\/head>
  <body>
    <h2>CSS Buttons<\/h2>

    <button>Default Button<\/button>
    <a href=\"#\" class=\"button\">Link Button<\/a>
    <button class=\"button\">Button<\/button>
    <input type=\"button\" class=\"button\" value=\"Input Button\" \/>
  <\/body>
<\/html><\/pre>\n\n\n\n
Colores en botones<\/h2>\n\n\n\n
Para el fondo utilizamos la propiedad background-color<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.button1 {background-color: #4CAF50;} \/* Green *\/\n.button2 {background-color: #008CBA;} \/* Blue *\/\n.button3 {background-color: #f44336;} \/* Red *\/\n.button4 {background-color: #e7e7e7; color: black;} \/* Gray *\/\n.button5 {background-color: #555555;} \/* Black *\/<\/pre>\n\n\n\n
Tama\u00f1o de los botones<\/h2>\n\n\n\n
Para el tama\u00f1o de la fuente utilizamos la propiedad font-size<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; \/* Green *\/
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
      }

      .button1 {
        font-size: 10px;
      }
      .button2 {
        font-size: 12px;
      }
      .button3 {
        font-size: 16px;
      }
      .button4 {
        font-size: 20px;
      }
      .button5 {
        font-size: 24px;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Button Sizes<\/h2>

    <p>Change the font size of a button with the font-size property:<\/p>

    <button class=\"button button1\">10px<\/button>
    <button class=\"button button2\">12px<\/button>
    <button class=\"button button3\">16px<\/button>
    <button class=\"button button4\">20px<\/button>
    <button class=\"button button5\">24px<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Relleno<\/h2>\n\n\n\n
Para el relleno entre el texto y el bot\u00f3n se utiliza la propiedad padding<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.button1 {padding: 10px 24px;}\n.button2 {padding: 12px 28px;}\n.button3 {padding: 14px 40px;}\n.button4 {padding: 32px 16px;}\n.button5 {padding: 16px;}<\/pre>\n\n\n\n
Botones redondeados<\/h2>\n\n\n\n
Usa la propiedad border-radius<\/em><\/strong> para a\u00f1adir esquinas redondeadas.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.button1 {border-radius: 2px;}\n.button2 {border-radius: 4px;}\n.button3 {border-radius: 8px;}\n.button4 {border-radius: 12px;}\n.button5 {border-radius: 50%;}<\/pre>\n\n\n\n
Botones flotantes<\/h2>\n\n\n\n
Usa el selector :hover<\/em><\/strong> para cambiar el estilo de un bot\u00f3n cuando mueve el mouse sobre \u00e9l.<\/p>\n\n\n\n
\n
Sugerencia<\/strong>: usa la propiedad transition-duration<\/em><\/strong> para determinar la velocidad del efecto de \u00abdesplazamiento\u00bb.<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; \/* Green *\/
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        transition-duration: 0.4s;
        cursor: pointer;
      }

      .button1 {
        background-color: white;
        color: black;
        border: 2px solid #4caf50;
      }

      .button1:hover {
        background-color: #4caf50;
        color: white;
      }

      .button2 {
        background-color: white;
        color: black;
        border: 2px solid #008cba;
      }

      .button2:hover {
        background-color: #008cba;
        color: white;
      }

      .button3 {
        background-color: white;
        color: black;
        border: 2px solid #f44336;
      }

      .button3:hover {
        background-color: #f44336;
        color: white;
      }

      .button4 {
        background-color: white;
        color: black;
        border: 2px solid #e7e7e7;
      }

      .button4:hover {
        background-color: #e7e7e7;
      }

      .button5 {
        background-color: white;
        color: black;
        border: 2px solid #555555;
      }

      .button5:hover {
        background-color: #555555;
        color: white;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Hoverable Buttons<\/h2>

    <p>
      Use the :hover selector to change the style of the button when you move
      the mouse over it.
    <\/p>
    <p>
      <strong>Tip:<\/strong> Use the transition-duration property to determine
      the speed of the \"hover\" effect:
    <\/p>

    <button class=\"button button1\">Green<\/button>
    <button class=\"button button2\">Blue<\/button>
    <button class=\"button button3\">Red<\/button>
    <button class=\"button button4\">Gray<\/button>
    <button class=\"button button5\">Black<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Sombra en botones<\/h2>\n\n\n\n
Usa la propiedad border-shadow<\/em><\/strong> para a\u00f1adir sombras a un bot\u00f3n.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; \/* Green *\/
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s; \/* Safari *\/
        transition-duration: 0.4s;
      }

      .button1 {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .button2:hover {
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
          0 17px 50px 0 rgba(0, 0, 0, 0.19);
      }
    <\/style>
  <\/head>
  <body>
    <h2>Shadow Buttons<\/h2>

    <p>Use the box-shadow property to add shadows to the button:<\/p>

    <button class=\"button button1\">Shadow Button<\/button>
    <button class=\"button button2\">Shadow on Hover<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Botones desabilitados \/ desactivados<\/h2>\n\n\n\n
Usa la propiedad opacity<\/em> <\/strong>para agregar transparencia a un bot\u00f3n (crea una apariencia \u00abdeshabilitada\u00bb).<\/p>\n\n\n\n
\n
Sugerencia<\/strong>: tambi\u00e9n puedes agregar la propiedad cursor<\/em><\/strong> con un valor de \u00abnot-allowed<\/em><\/strong>\u00ab, que mostrar\u00e1 una \u00abno parking sign\u00bb cuando pase el mouse sobre el bot\u00f3n:<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        background-color: #4caf50; \/* Green *\/
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

      .disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Disabled Button<\/h2>

    <p>
      Use the opacity property to add some transparency to a button (make it
      look disabled):
    <\/p>

    <button class=\"button\">Normal Button<\/button>
    <button class=\"button disabled\">Disabled Button<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Tama\u00f1o de botones<\/h2>\n\n\n\n
De forma predeterminada, el tama\u00f1o del bot\u00f3n est\u00e1 determinado por su contenido de texto (tan ancho como su contenido). Usa la propiedad width<\/em><\/strong> para cambiar el ancho de un bot\u00f3n.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.button1 {width: 250px;}\n.button2 {width: 50%;}\n.button3 {width: 100%;}<\/pre>\n\n\n\n
Grupos de botones<\/h2>\n\n\n\n
Elimina los m\u00e1rgenes y agrega float:left<\/em><\/strong> a cada bot\u00f3n para crear un grupo de botones.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: #4caf50; \/* Green *\/
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        float: left;
      }

      .btn-group .button:hover {
        background-color: #3e8e41;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Button Groups<\/h2>

    <p>Remove margins and float the buttons to create a button group:<\/p>

    <div class=\"btn-group\">
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
    <\/div>

    <p style=\"clear: both\">
      <br \/>Remember to clear floats after, or else will this p element also
      float next to the buttons.
    <\/p>
  <\/body>
<\/html><\/pre>\n\n\n\n
Grupos de botones bordeados<\/h2>\n\n\n\n
Para ello utilizaremos la propiedad border<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: #4caf50; \/* Green *\/
        border: 1px solid green;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        float: left;
      }

      .btn-group .button:not(:last-child) {
        border-right: none; \/* Prevent double borders *\/
      }

      .btn-group .button:hover {
        background-color: #3e8e41;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Bordered Button Group<\/h2>

    <p>Add borders to create a bordered button group:<\/p>

    <div class=\"btn-group\">
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
    <\/div>

    <p style=\"clear: both\">
      <br \/>Remember to clear floats after, or else will this p element also
      float next to the buttons.
    <\/p>
  <\/body>
<\/html>
<\/pre>\n\n\n\n
Grupo vertical de botones<\/h2>\n\n\n\n
Usa display: block<\/em><\/strong> en lugar de float: left<\/em><\/strong> para agrupar los botones uno debajo del otro, en lugar de uno al lado del otro.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn-group .button {
        background-color: #4caf50; \/* Green *\/
        border: 1px solid green;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        width: 150px;
        display: block;
      }

      .btn-group .button:not(:last-child) {
        border-bottom: none; \/* Prevent double borders *\/
      }

      .btn-group .button:hover {
        background-color: #3e8e41;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Vertical Button Group<\/h2>

    <div class=\"btn-group\">
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
      <button class=\"button\">Button<\/button>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Botones animados<\/h2>\n\n\n\n
Agrega una flecha al pasar el mouse<\/h3>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        display: inline-block;
        border-radius: 4px;
        background-color: #f4511e;
        border: none;
        color: #ffffff;
        text-align: center;
        font-size: 28px;
        padding: 20px;
        width: 200px;
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;
      }

      .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
      }

      .button span:after {
        content: \"\\00bb\";
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
      }

      .button:hover span {
        padding-right: 25px;
      }

      .button:hover span:after {
        opacity: 1;
        right: 0;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Animated Button<\/h2>

    <button class=\"button\" style=\"vertical-align: middle\">
      <span>Hover <\/span>
    <\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Agrega un efecto \u00abpresionado\u00bb al hacer clic<\/h3>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        display: inline-block;
        padding: 15px 25px;
        font-size: 24px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color: #fff;
        background-color: #4caf50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
      }

      .button:hover {
        background-color: #3e8e41;
      }

      .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
      }
    <\/style>
  <\/head>
  <body>
    <h2>Animated Button - \"Pressed Effect\"<\/h2>

    <button class=\"button\">Click Me<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Fade in al pasar el rat\u00f3n<\/h3>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
    <style>
      .button {
        background-color: #f4511e;
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        font-size: 16px;
        margin: 4px 2px;
        opacity: 0.6;
        transition: 0.3s;
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
      }

      .button:hover {
        opacity: 1;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Animated Button - Fade in Effect<\/h2>

    <button class=\"button\">Hover Over Me<\/button>
  <\/body>
<\/html><\/pre>\n\n\n\n
Agregue un efecto de \u00abonda\u00bb al hacer clic<\/h3>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html>
  <head>
    <style>
      .button {
        position: relative;
        background-color: #4caf50;
        border: none;
        font-size: 28px;
        color: #ffffff;
        padding: 20px;
        width: 200px;
        text-align: center;
        transition-duration: 0.4s;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
      }

      .button:after {
        content: \"\";
        background: #f1f1f1;
        display: block;
        position: absolute;
        padding-top: 300%;
        padding-left: 350%;
        margin-left: -20px !important;
        margin-top: -120%;
        opacity: 0;
        transition: all 0.8s;
      }

      .button:active:after {
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: 0s;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Animated Button - Ripple Effect<\/h2>

    <button class=\"button\">Click Me<\/button>
  <\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Veamos un primer ejm de un bot\u00f3n dot\u00e1ndole de estilo CSS.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1420","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Veamos un primer ejm de un bot\u00f3n dot\u00e1ndole de estilo CSS.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1420"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1420\/revisions"}],"predecessor-version":[{"id":1423,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1420\/revisions\/1423"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}