3D Wobble Button

[{"id":"f57e0fc0-5b29-46ef-9128-2965de5a9b2c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"be8295c4-1f14-4d7f-98d4-023301cba809","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #111111;\\n font-family: \\\"Work Sans\\\", Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.wrapper {\\n width: auto;\\n margin: auto;\\n perspective: 500px;\\n transform: rotateX(10deg);\\n animation: rotateAngle 6s linear infinite;\\n}\\n\\n.wrapper button {\\n display: block;\\n position: relative;\\n margin: 0.5em 0;\\n padding: 0.8em 2.2em;\\n cursor: pointer;\\n background: #ffffff;\\n border: none;\\n border-radius: 0.4em;\\n text-transform: uppercase;\\n font-size: 19px;\\n font-family: \\\"Work Sans\\\", Arial, Helvetica, sans-serif;\\n font-weight: 500;\\n letter-spacing: 0.04em;\\n color: #111111;\\n mix-blend-mode: color-dodge;\\n perspective: 500px;\\n transform-style: preserve-3d;\\n}\\n\\n.wrapper button::before,\\n.wrapper button::after {\\n --z: 0px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n mix-blend-mode: inherit;\\n border-radius: inherit;\\n transform-style: preserve-3d;\\n transform: translate3d(\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px)\\n );\\n}\\n\\n.wrapper button::after {\\n background-color: #5d00ff;\\n}\\n\\n.wrapper button::before {\\n background-color: #ff1731;\\n}\\n\\n.wrapper button:hover {\\n background-color: #fff65b;\\n transition: background 0.3s 0.1s;\\n}\\n\\n.wrapper button:hover::before {\\n --z: 0.04;\\n animation: translateWobble 2.2s ease forwards;\\n}\\n\\n.wrapper button:hover::after {\\n --z: -0.06;\\n animation: translateWobble 2.2s ease forwards;\\n}\\n\\n@keyframes rotateAngle {\\n 0% {\\n transform: rotateY(0deg) rotateX(10deg);\\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\\n }\\n\\n 25% {\\n transform: rotateY(20deg) rotateX(10deg);\\n }\\n\\n 50% {\\n transform: rotateY(0deg) rotateX(10deg);\\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\\n }\\n\\n 75% {\\n transform: rotateY(-20deg) rotateX(10deg);\\n }\\n\\n 100% {\\n transform: rotateY(0deg) rotateX(10deg);\\n }\\n}\\n\\n@keyframes translateWobble {\\n 0% {\\n opacity: 0;\\n transform: translate3d(\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px)\\n );\\n }\\n\\n 16% {\\n transform: translate3d(\\n calc(var(--z) * 160px),\\n calc(var(--z) * 160px),\\n calc(var(--z) * 160px)\\n );\\n }\\n\\n 28% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 70px),\\n calc(var(--z) * 70px),\\n calc(var(--z) * 70px)\\n );\\n }\\n\\n 44% {\\n transform: translate3d(\\n calc(var(--z) * 130px),\\n calc(var(--z) * 130px),\\n calc(var(--z) * 130px)\\n );\\n }\\n\\n 59% {\\n transform: translate3d(\\n calc(var(--z) * 85px),\\n calc(var(--z) * 85px),\\n calc(var(--z) * 85px)\\n );\\n }\\n\\n 73% {\\n transform: translate3d(\\n calc(var(--z) * 110px),\\n calc(var(--z) * 110px),\\n calc(var(--z) * 110px)\\n );\\n }\\n\\n 88% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 90px),\\n calc(var(--z) * 90px),\\n calc(var(--z) * 90px)\\n );\\n }\\n\\n 100% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 100px),\\n calc(var(--z) * 100px),\\n calc(var(--z) * 100px)\\n );\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .wrapper {\\n animation: none;\\n }\\n\\n .wrapper button::before,\\n .wrapper button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n 3D Wobble Button\\n \\n \\n \\n

\\n

\\n \\n

\\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"30f1754f-3b76-43b8-b459-f9638800fd97","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"70d92334-28f0-431f-bc27-95488237543c","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n

\\n \\n

\\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"55b3517f-e08c-4b45-930d-a47ea723dae6","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"b67da8b5-b205-4b68-8af7-5247359b151f","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n background: #111111;\\n font-family: \\\"Work Sans\\\", Arial, Helvetica, sans-serif;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.wrapper {\\n width: auto;\\n margin: auto;\\n perspective: 500px;\\n transform: rotateX(10deg);\\n animation: rotateAngle 6s linear infinite;\\n}\\n\\n.wrapper button {\\n display: block;\\n position: relative;\\n margin: 0.5em 0;\\n padding: 0.8em 2.2em;\\n cursor: pointer;\\n background: #ffffff;\\n border: none;\\n border-radius: 0.4em;\\n text-transform: uppercase;\\n font-size: 19px;\\n font-family: \\\"Work Sans\\\", Arial, Helvetica, sans-serif;\\n font-weight: 500;\\n letter-spacing: 0.04em;\\n color: #111111;\\n mix-blend-mode: color-dodge;\\n perspective: 500px;\\n transform-style: preserve-3d;\\n}\\n\\n.wrapper button::before,\\n.wrapper button::after {\\n --z: 0px;\\n position: absolute;\\n top: 0;\\n left: 0;\\n display: block;\\n content: \\\"\\\";\\n width: 100%;\\n height: 100%;\\n opacity: 0;\\n mix-blend-mode: inherit;\\n border-radius: inherit;\\n transform-style: preserve-3d;\\n transform: translate3d(\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px)\\n );\\n}\\n\\n.wrapper button::after {\\n background-color: #5d00ff;\\n}\\n\\n.wrapper button::before {\\n background-color: #ff1731;\\n}\\n\\n.wrapper button:hover {\\n background-color: #fff65b;\\n transition: background 0.3s 0.1s;\\n}\\n\\n.wrapper button:hover::before {\\n --z: 0.04;\\n animation: translateWobble 2.2s ease forwards;\\n}\\n\\n.wrapper button:hover::after {\\n --z: -0.06;\\n animation: translateWobble 2.2s ease forwards;\\n}\\n\\n@keyframes rotateAngle {\\n 0% {\\n transform: rotateY(0deg) rotateX(10deg);\\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\\n }\\n\\n 25% {\\n transform: rotateY(20deg) rotateX(10deg);\\n }\\n\\n 50% {\\n transform: rotateY(0deg) rotateX(10deg);\\n animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);\\n }\\n\\n 75% {\\n transform: rotateY(-20deg) rotateX(10deg);\\n }\\n\\n 100% {\\n transform: rotateY(0deg) rotateX(10deg);\\n }\\n}\\n\\n@keyframes translateWobble {\\n 0% {\\n opacity: 0;\\n transform: translate3d(\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px),\\n calc(var(--z) * 0px)\\n );\\n }\\n\\n 16% {\\n transform: translate3d(\\n calc(var(--z) * 160px),\\n calc(var(--z) * 160px),\\n calc(var(--z) * 160px)\\n );\\n }\\n\\n 28% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 70px),\\n calc(var(--z) * 70px),\\n calc(var(--z) * 70px)\\n );\\n }\\n\\n 44% {\\n transform: translate3d(\\n calc(var(--z) * 130px),\\n calc(var(--z) * 130px),\\n calc(var(--z) * 130px)\\n );\\n }\\n\\n 59% {\\n transform: translate3d(\\n calc(var(--z) * 85px),\\n calc(var(--z) * 85px),\\n calc(var(--z) * 85px)\\n );\\n }\\n\\n 73% {\\n transform: translate3d(\\n calc(var(--z) * 110px),\\n calc(var(--z) * 110px),\\n calc(var(--z) * 110px)\\n );\\n }\\n\\n 88% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 90px),\\n calc(var(--z) * 90px),\\n calc(var(--z) * 90px)\\n );\\n }\\n\\n 100% {\\n opacity: 1;\\n transform: translate3d(\\n calc(var(--z) * 100px),\\n calc(var(--z) * 100px),\\n calc(var(--z) * 100px)\\n );\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .wrapper {\\n animation: none;\\n }\\n\\n .wrapper button::before,\\n .wrapper button::after {\\n animation: none;\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"08e369ae-87d1-4381-a483-2b63524d19d6","type":"divider","props":{},"children":[]},{"id":"758f149b-5cf6-4103-adb9-99ffb0f7c356","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]