Last active
June 16, 2023 21:24
-
-
Save jeffersondev/3c64b84bb8204a2b0917fc810237a7f1 to your computer and use it in GitHub Desktop.
Curso de FrontEnd da TOTI - Módulo de CSS3 - Aula de Botões (replicação de botões da página https://www.linkedin.com/school/toti-diversidade)
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
| * { | |
| font-family: -apple-system, sans-serif; | |
| font-size: 16px; | |
| font-weight: 600; | |
| line-height: 20px; | |
| } | |
| .botao { | |
| display: inline-flex; | |
| align-items: center; | |
| border-width: 1px; | |
| border-style: solid; | |
| height: 32px; | |
| border-radius: 16px; | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| .botao__primario { | |
| background-color: transparent; | |
| color: #0a66c2; | |
| border-color: #0a66c2; | |
| } | |
| .botao__primario:hover { | |
| background-color: rgba(112, 181, 249, 0.2); | |
| border-width: 2px; | |
| } | |
| .botao__primario:active { | |
| background-color: rgba(112, 181, 249, 0.3); | |
| color: #004182; | |
| border-color: #004182; | |
| } | |
| .botao__secundario { | |
| background-color: #0a66c2; | |
| color: #fff; | |
| border-color: transparent; | |
| } | |
| .botao__secundario:hover { | |
| background-color: #004182; | |
| } | |
| .botao__secundario:active { | |
| background-color: #09223b; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .botao__terciario { | |
| background-color: transparent; | |
| color: rgba(0, 0, 0, 0.6); | |
| border-color: rgba(0, 0, 0, 0.6); | |
| } | |
| .botao__terciario:hover { | |
| border-width: 2px; | |
| background-color: rgba(0, 0, 0, 0.08); | |
| color: rgba(0, 0, 0, 0.6); | |
| border-color: rgba(0, 0, 0, 0.6); | |
| } | |
| .botao__terciario:active { | |
| color: rgba(0, 0, 0, 0.9); | |
| border-color: rgba(0, 0, 0, 0.9); | |
| } |
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
| <html> | |
| <body> | |
| <button class="botao botao__primario"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" data-supported-dps="16x16" fill="currentColor" class="mercado-match" width="16" height="16" focusable="false"> | |
| <path d="M12.57 2H15L6 15l-5-5 1.41-1.41 3.31 3.3z"></path> | |
| </svg> | |
| <span>Seguindo</span> | |
| </button> | |
| <a href="#" class="botao botao__secundario"> | |
| <span>Visite o site</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" data-supported-dps="16x16" fill="currentColor" class="mercado-match" width="16" height="16" focusable="false"> | |
| <path d="M15 1v6h-2V4.41L7.41 10 6 8.59 11.59 3H9V1zm-4 10a1 1 0 01-1 1H5a1 1 0 01-1-1V6a1 1 0 011-1h2V3H5a3 3 0 00-3 3v5a3 3 0 003 3h5a3 3 0 003-3V9h-2z"></path> | |
| </svg> | |
| </a> | |
| <button class="botao botao__terciario">Mais</button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment