Last active
February 24, 2025 03:13
-
-
Save Klerith/76e65f02c8b68e1bd302275b26d3b188 to your computer and use it in GitHub Desktop.
Botón de Google
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
| <div | |
| className="google-btn" | |
| > | |
| <div className="google-icon-wrapper"> | |
| <img className="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="google button" /> | |
| </div> | |
| <p className="btn-text"> | |
| <b>Sign in with google</b> | |
| </p> | |
| </div> |
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
| $white: #fff; | |
| $google-blue: #4285f4; | |
| $button-active-blue: #1669f2; | |
| .google-btn { | |
| cursor: pointer; | |
| margin-top: 5px; | |
| width: 100%; | |
| height: 42px; | |
| background-color: $google-blue; | |
| border-radius: 2px; | |
| box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25); | |
| transition: box-shadow .3s ease; | |
| .google-icon-wrapper { | |
| position: absolute; | |
| margin-top: 1px; | |
| margin-left: 1px; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 2px; | |
| background-color: $white; | |
| } | |
| .google-icon { | |
| position: absolute; | |
| margin-top: 11px; | |
| margin-left: 11px; | |
| width: 18px; | |
| height: 18px; | |
| } | |
| .btn-text { | |
| float: right; | |
| margin: 11px 40px 0 0; | |
| color: $white; | |
| font-size: 14px; | |
| letter-spacing: 0.2px; | |
| } | |
| &:hover { | |
| box-shadow: 0 0 6px $google-blue; | |
| } | |
| &:active { | |
| background: $button-active-blue; | |
| } | |
| } | |
https://www.npmjs.com/package/react-google-button
ese botón lo usé en otro proyecto y creo que puede servir mas (mucho menos código)
https://www.npmjs.com/package/react-google-button
ese botón lo usé en otro proyecto y creo que puede servir mas (mucho menos código)
Gracias me sirvio @Crispovilla
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Mi propuesta usando SCSS
`.google-btn {
align-items: center;
background-color: $google-blue;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
margin-top: 5px;
height: 40px;
transition: box-shadow 0.3s ease;
width: 100%;
.google-icon-wrapper {
align-items: center;
border-radius: 2px 0 0 2px;
background-color: $white;
display: flex;
justify-content: center;
height: 40px;
width: 40px;
.google-icon {
width: 18px;
height: 18px;
}
}
.btn-text {
color: $white;
font-size: 14px;
letter-spacing: 0.2px;
margin-left: 10px;
}
&:hover {
box-shadow: 0 0 6px $google-blue;
}
&:active {
background: $button-active-blue;
}
}
`