Last active
June 25, 2022 22:05
-
-
Save highercomve/177055a1d144ebbfb069 to your computer and use it in GitHub Desktop.
Curso de HTML/CSS: Botones
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Botones con CSS | EscuelaWeb</title> | |
| <link rel="stylesheet" href="css/base.css"> | |
| <link rel="stylesheet" href="font/style.css"> | |
| <link rel="stylesheet" href="css/botones.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="row"> | |
| <h1>Botones con CSS</h1> | |
| </div> | |
| </header> | |
| <section id="botones-simples"> | |
| <header class="row"> | |
| <h2>Botones estandar</h2> | |
| <p> | |
| Los botones estandar, son enlaces que tienen propiedades graficas | |
| de un boton y pueden presentarse en distintas presentaciones. | |
| </p> | |
| <p> | |
| En este caso vamos a crear un boton con 4 tipos de colores y 3 variantes | |
| de tamaño, extendiendo la clase "boton" para agregar variaciones. | |
| </p> | |
| </header> | |
| <div class="row flex"> | |
| <article class="column text-center"> | |
| <header> | |
| <h4>Boton Base</h4> | |
| </header> | |
| <p> | |
| <a href="#" class="boton">Boton base</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton error">Boton de error</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton success">Boton de success</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton warning">Boton de warning</a> | |
| </p> | |
| </article> | |
| <article class="column text-center"> | |
| <header> | |
| <h4>Variaciones de tamaño</h4> | |
| </header> | |
| <p> | |
| <a href="#" class="boton">Tamaño estandar</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton m">Boton mediano</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton l">Boton grande</a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton block">Boton ancho completo</a> | |
| </p> | |
| </article> | |
| <article class="column text-center"> | |
| <header> | |
| <h4>Botones con iconos</h4> | |
| </header> | |
| <p> | |
| <a href="#" class="boton icon"> | |
| Icono a la izquierda | |
| <span class="icon-link"></span> | |
| </a> | |
| </p> | |
| <p> | |
| <a href="#" class="boton icon right"> | |
| Icono a la derecha | |
| <span class="icon-plus2"></span> | |
| </a> | |
| </p> | |
| </article> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .boton { | |
| position: relative; | |
| display: inline-block; | |
| padding: 0.9em 1.4em; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 0.3em; | |
| background-color: #5f41f0; | |
| border-bottom: 4px solid #2200c9; | |
| text-shadow: 0 -1px 0 #1a009d; | |
| } | |
| .boton:hover { | |
| background-color: #5a5fde; | |
| } | |
| .boton:active { | |
| margin-top: 4px; | |
| border-bottom: 0px solid transparent !important; | |
| } | |
| .boton.error { | |
| background-color: #d92e4d; | |
| border-bottom: 4px solid #b7033d; | |
| text-shadow: 0 -1px 0 #9d002a; | |
| } | |
| .boton.error:hover { | |
| background-color: #f04163; | |
| } | |
| .boton.warning { | |
| background-color: #d9cc2e; | |
| border-bottom: 4px solid #a9b703; | |
| text-shadow: 0 -1px 0 #919d00; | |
| } | |
| .boton.warning:hover { | |
| background-color: #f0e341; | |
| } | |
| .boton.success { | |
| background-color: #2ed983; | |
| border-bottom: 4px solid #03b787; | |
| text-shadow: 0 -1px 0 #009d61; | |
| } | |
| .boton.success:hover { | |
| background-color: #41f0a6; | |
| } | |
| .boton.m { | |
| font-size: 1.2em; | |
| } | |
| .boton.l { | |
| font-size: 1.4em; | |
| padding: 1em 2em; | |
| } | |
| .boton.block { | |
| display: block; | |
| text-align: center; | |
| } | |
| .boton.icon { | |
| padding-left: 3em; | |
| } | |
| .boton.icon span { | |
| position: absolute; | |
| top: 0.2em; | |
| left: 0; | |
| font-size: 1.6em; | |
| display: inline-block; | |
| padding: 0.2em 0.2em; | |
| box-shadow: 1px 0 0 0 white; | |
| } | |
| .boton.icon.right { | |
| padding-right: 3em; | |
| padding-left: 1.4em; | |
| } | |
| .boton.icon.right span { | |
| right: 0; | |
| left: auto; | |
| box-shadow: -1px 0 0 0 white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment