122 lines
2.4 KiB
SCSS
122 lines
2.4 KiB
SCSS
|
// CREDIT: https://www.joshwcomeau.com/animation/3d-button/
|
||
|
|
|
||
|
|
@mixin button-effect {
|
||
|
|
.pushable {
|
||
|
|
position: relative;
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
padding: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
outline-offset: 4px;
|
||
|
|
transition: filter 250ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadow {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// border-radius: 12px;
|
||
|
|
background: hsl(0deg 0% 0% / 0.25);
|
||
|
|
will-change: transform;
|
||
|
|
transform: translateY(2px);
|
||
|
|
transition:
|
||
|
|
transform 600ms cubic-bezier(.3, .7, .4, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.edge {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
// border-radius: 12px;
|
||
|
|
background: linear-gradient(to left,
|
||
|
|
hsl(235, 84%, 26%) 0%,
|
||
|
|
hsl(235, 84%, 26%) 8%,
|
||
|
|
hsl(235, 84%, 26%) 92%,
|
||
|
|
hsl(235, 84%, 26%) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.front {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
padding: 12px 42px;
|
||
|
|
// border-radius: 12px;
|
||
|
|
// font-size: 1.25rem;
|
||
|
|
color: white;
|
||
|
|
background: hsl(188, 88%, 29%);
|
||
|
|
will-change: transform;
|
||
|
|
transform: translateY(-4px);
|
||
|
|
transition:
|
||
|
|
transform 600ms cubic-bezier(.3, .7, .4, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:hover {
|
||
|
|
filter: brightness(110%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:hover .front {
|
||
|
|
transform: translateY(-6px);
|
||
|
|
transition:
|
||
|
|
transform 250ms cubic-bezier(.3, .7, .4, 1.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:active .front {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
transition: transform 34ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:hover .shadow {
|
||
|
|
transform: translateY(4px);
|
||
|
|
transition:
|
||
|
|
transform 250ms cubic-bezier(.3, .7, .4, 1.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:active .shadow {
|
||
|
|
transform: translateY(1px);
|
||
|
|
transition: transform 34ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable:focus:not(:focus-visible) {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable-f {
|
||
|
|
|
||
|
|
.front,
|
||
|
|
.edge,
|
||
|
|
.shadow {
|
||
|
|
border-top-left-radius: 13px;
|
||
|
|
border-bottom-left-radius: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edge {
|
||
|
|
background: linear-gradient(to left,
|
||
|
|
hsl(235, 84%, 26%) 0%,
|
||
|
|
hsl(235, 84%, 26%) 8%,
|
||
|
|
hsl(235, 84%, 26%) 92%,
|
||
|
|
hsl(193, 100%, 30%) 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.pushable-l {
|
||
|
|
|
||
|
|
.front,
|
||
|
|
.edge,
|
||
|
|
.shadow {
|
||
|
|
|
||
|
|
border-top-right-radius: 13px;
|
||
|
|
border-bottom-right-radius: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edge {
|
||
|
|
background: linear-gradient(to left,
|
||
|
|
hsl(193, 100%, 30%) 0%,
|
||
|
|
hsl(235, 84%, 26%) 8%,
|
||
|
|
hsl(235, 84%, 26%) 92%,
|
||
|
|
hsl(235, 84%, 26%) 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|