Button by aseel-al-zubaidi_pwcit
#e8e8e8
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: #e88d14; 16 text-transform: uppercase; 17 padding: 1.25em 2em; 18 background: #ad1b02; 19 border: 2px solid #f3be26; 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), 24 -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); 25 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), 26 background 150ms cubic-bezier(0, 0, 0.58, 1), 27 -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1); 28} 29 30button.learn-more::before { 31 position: absolute; 32 content: ""; 33 width: 100%; 34 height: 100%; 35 top: 0; 36 left: 0; 37 right: 0; 38 bottom: 0; 39 background: #f3be26; 40 border-radius: inherit; 41 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; 42 box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2; 43 -webkit-transform: translate3d(0, 0.75em, -1em); 44 transform: translate3d(0, 0.75em, -1em); 45 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), 46 box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), 47 -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), 48 -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1); 49} 50 51button.learn-more:hover { 52 background: #ffe9e9; 53 -webkit-transform: translate(0, 0.25em); 54 transform: translate(0, 0.25em); 55} 56 57button.learn-more:hover::before { 58 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; 59 box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2; 60 -webkit-transform: translate3d(0, 0.5em, -1em); 61 transform: translate3d(0, 0.5em, -1em); 62} 63 64button.learn-more:active { 65 background: #ffe9e9; 66 -webkit-transform: translate(0em, 0.75em); 67 transform: translate(0em, 0.75em); 68} 69 70button.learn-more:active::before { 71 -webkit-box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; 72 box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2; 73 -webkit-transform: translate3d(0, 0, -1em); 74 transform: translate3d(0, 0, -1em); 75} 76
166 views
Variation of abutton
MIT License