Closed adamgiebl closed 11 months ago
Describe the bug
To Reproduce Include reproduction HTML (optionally with CSS) to use in code.to.design Playground for reproduction:
<button class="learn-more"> Learn More </button>
button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; font-family: inherit; font-size: 15px; } button.learn-more { font-weight: 600; color: #382b22; text-transform: uppercase; padding: 1.25em 2em; background: #fff0f0; border: 2px solid #b18597; border-radius: 0.75em; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); } button.learn-more::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: #f9c4d2; border-radius: inherit; -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; -webkit-transform: translate3d(0, 0.75em, -1em); transform: translate3d(0, 0.75em, -1em); transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1); } button.learn-more:hover { background: #ffe9e9; -webkit-transform: translate(0, 0.25em); transform: translate(0, 0.25em); } button.learn-more:hover::before { -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; -webkit-transform: translate3d(0, 0.5em, -1em); transform: translate3d(0, 0.5em, -1em); } button.learn-more:active { background: #ffe9e9; -webkit-transform: translate(0em, 0.75em); transform: translate(0em, 0.75em); } button.learn-more:active::before { -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; -webkit-transform: translate3d(0, 0, -1em); transform: translate3d(0, 0, -1em); }
Hi @adamgiebl
We just released a fix for it:
Cheers Remy
Describe the bug
To Reproduce Include reproduction HTML (optionally with CSS) to use in code.to.design Playground for reproduction: