.button_style_1 { position: relative; overflow: visible; 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: 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); 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_style_1::before { position: absolute; z-index: -1; content: ""; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: #f9c4d2; border-radius: inherit; 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); -webkit-transition: box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); transition: box-shadow 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), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1); 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); } .button_style_1:hover { background: #ffe9e9; -webkit-transform: translate(0, 0.25em); transform: translate(0, 0.25em); } .button_style_1:hover::before { 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_style_1:active { background: #ffe9e9; -webkit-transform: translate(0em, 0.75em); transform: translate(0em, 0.75em); } .button_style_1:active::before { box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; -webkit-transform: translate3d(0, 0, -1em); transform: translate3d(0, 0, -1em); }