/* HTML */ <a href="#"><button class="button-02 learn-more">Learn More</button></a> /* CSS */ .button-02 { display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; font-family: inherit; font-size: 15px; } .learn-more { font-weight: 600; color: #382b22; text-transform: uppercase; padding: 10px 20px; 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); } .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); } .learn-more:hover { background: #ffe9e9; -webkit-transform: translate(0, 0.25em); transform: translate(0, 0.25em); } .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); } .learn-more:active { background: #ffe9e9; -webkit-transform: translate(0em, 0.75em); transform: translate(0em, 0.75em); } .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); }
0 Comments