Skip to content

Instantly share code, notes, and snippets.

@bran-deb
Last active January 23, 2022 07:47
Show Gist options
  • Select an option

  • Save bran-deb/f161ac766e5cf0e8e654c1e2c3026f2f to your computer and use it in GitHub Desktop.

Select an option

Save bran-deb/f161ac766e5cf0e8e654c1e2c3026f2f to your computer and use it in GitHub Desktop.
:root {
/* google btn */
--white: #fff;
--google-blue: #4285f4;
--button-active-blue: #1669f2;
}
.google-btn {
cursor: pointer;
margin-top: 5px;
width: 100%;
height: 42px;
background-color: var(--google-blue);
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
transition: box-shadow .3s ease;
}
.google-btn .google-icon-wrapper {
position: absolute;
margin-top: 1px;
margin-left: 1px;
width: 40px;
height: 40px;
border-radius: 2px;
background-color: var(--white);
}
.google-btn .google-icon {
position: absolute;
margin-top: 11px;
margin-left: 11px;
width: 18px;
height: 18px;
}
.google-btn .btn-text {
float: right;
margin: 11px 40px 0 0;
color: var(--white);
font-size: 14px;
letter-spacing: 0.2px;
}
.google-btn:hover {
box-shadow: 0 0 6px var(--google-blue);
}
.google-btn:active {
background: var(--button-active-blue);
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment