7.1K views
1button { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5 outline: none; 6 border: 0; 7 vertical-align: middle; 8 text-decoration: none; 9 font-family: inherit; 10 font-size: 15px; 11} 12 13button.learn-more { 14 font-weight: 600; 15 color: #382b22; 16 text-transform: uppercase; 17 padding: 1.25em 2em; 18 background: #fff0f0; 19 border: 2px solid #b18597; 20 border-radius: 0.75em; 21 -webkit-transform-style: preserve-3d; 22 transform-style: preserve-3d; 23 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); 24 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); 25} 26 27button.learn-more::before { 28 position: absolute; 29 content: ''; 30 width: 100%; 31 height: 100%; 32 top: 0; 33 left: 0; 34 right: 0; 35 bottom: 0; 36 background: #f9c4d2; 37 border-radius: inherit; 38 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; 39 box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; 40 -webkit-transform: translate3d(0, 0.75em, -1em); 41 transform: translate3d(0, 0.75em, -1em); 42 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); 43} 44 45button.learn-more:hover { 46 background: #ffe9e9; 47 -webkit-transform: translate(0, 0.25em); 48 transform: translate(0, 0.25em); 49} 50 51button.learn-more:hover::before { 52 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; 53 box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; 54 -webkit-transform: translate3d(0, 0.5em, -1em); 55 transform: translate3d(0, 0.5em, -1em); 56} 57 58button.learn-more:active { 59 background: #ffe9e9; 60 -webkit-transform: translate(0em, 0.75em); 61 transform: translate(0em, 0.75em); 62} 63 64button.learn-more:active::before { 65 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; 66 box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; 67 -webkit-transform: translate3d(0, 0, -1em); 68 transform: translate3d(0, 0, -1em); 69}