Skip to content

Instantly share code, notes, and snippets.

@Paper-Folding

Paper-Folding/index.html

Last active August 9, 2022 06:10
Show Gist options
  • Save Paper-Folding/d44da0cf1bd73ac88f235d3fdce41db6 to your computer and use it in GitHub Desktop.
Save Paper-Folding/d44da0cf1bd73ac88f235d3fdce41db6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d button</title>
<style>
.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(340deg 100% 16%) 0%,
hsl(340deg 100% 32%) 8%,
hsl(340deg 100% 32%) 92%,
hsl(340deg 100% 16%) 100%);
}
.front {
display: block;
position: relative;
padding: 12px 42px;
border-radius: 12px;
font-size: 1.25rem;
color: white;
background: hsl(345deg 100% 47%);
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;
}
</style>
</head>
<body>
<a href="https://www.joshwcomeau.com/animation/3d-button/" style="display: block">From here</a>
<br>
<br>
<button class="pushable">
<span class="shadow"></span>
<span class="edge"></span>
<span class="front">
Push me
</span>
</button>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment