Button by NelsonDJCR
#e8e8e8
1.button2 { 2 display: inline-block; 3 transition: all 0.2s ease-in; 4 position: relative; 5 overflow: hidden; 6 z-index: 1; 7 color: #090909; 8 padding: 0.7em 3.3em 0.7em 1.7em; 9 font-size: 18px; 10 border-radius: 0.5em; 11 background: #e8e8e8; 12 border: 1px solid #e8e8e8; 13 box-shadow: 6px 6px 12px #c5c5c5, 14 -6px -6px 12px #ffffff; 15} 16 17.button2 > svg { 18 height: 30px; 19 position: absolute; 20 padding: 0px 5px; 21 margin-top: -4px; 22} 23 24.button2:active { 25 color: #666; 26 box-shadow: inset 4px 4px 12px #c5c5c5, 27 inset -4px -4px 12px #ffffff; 28} 29 30.button2:before { 31 content: ""; 32 position: absolute; 33 left: 50%; 34 transform: translateX(-50%) scaleY(1) scaleX(1.25); 35 top: 100%; 36 width: 140%; 37 height: 180%; 38 background-color: rgba(0, 0, 0, 0.05); 39 border-radius: 50%; 40 display: block; 41 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 42 z-index: -1; 43} 44 45.button2:after { 46 content: ""; 47 position: absolute; 48 left: 55%; 49 transform: translateX(-50%) scaleY(1) scaleX(1.45); 50 top: 180%; 51 width: 160%; 52 height: 190%; 53 background-color: #009087; 54 border-radius: 50%; 55 display: block; 56 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 57 z-index: -1; 58} 59 60.button2:hover { 61 color: #ffffff; 62 border: 1px solid #009087; 63} 64 65.button2:hover:before { 66 top: -35%; 67 background-color: #009087; 68 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 69} 70 71.button2:hover:after { 72 top: -45%; 73 background-color: #009087; 74 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 75} 76
1.6K views
Variation of abutton
MIT License