Skip to content

Instantly share code, notes, and snippets.

@GGrassiant

GGrassiant/A. 3D effect button.md

Last active January 26, 2022 21:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GGrassiant/b851b3b2e0c59b61335bd9fb52ae3d9c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GGrassiant/b851b3b2e0c59b61335bd9fb52ae3d9c to your computer and use it in GitHub Desktop.
Download ZIP
3D effect button
Raw
button.scss
.button {
box-sizing: border-box !important;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
min-width: 185px;
padding: 10px 2rem;
border: 2px solid #000028;
border-radius: 40px !important;
box-shadow: 8px 8px 0 0 rgba(0,0,40,1);
background: white;
color: #000028;
font-size: 18px;
font-weight: 600;
line-height: 1;
text-align: center;
text-decoration: none !important;
transition: .1s ease-in all;
&:hover {
box-shadow: 4px 4px 0 0 rgba(0,0,40,1);
transform: translate(4px,4px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment