#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 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:active { 18 color: #666; 19 box-shadow: inset 4px 4px 12px #c5c5c5, 20 inset -4px -4px 12px #ffffff; 21} 22 23.button2:before { 24 content: ""; 25 position: absolute; 26 left: 50%; 27 transform: translateX(-50%) scaleY(1) scaleX(1.25); 28 top: 100%; 29 width: 140%; 30 height: 180%; 31 background-color: rgba(0, 0, 0, 0.05); 32 border-radius: 50%; 33 display: block; 34 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 35 z-index: -1; 36} 37 38.button2:after { 39 content: ""; 40 position: absolute; 41 left: 55%; 42 transform: translateX(-50%) scaleY(1) scaleX(1.45); 43 top: 180%; 44 width: 160%; 45 height: 190%; 46 background-color: #009087; 47 border-radius: 50%; 48 display: block; 49 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 50 z-index: -1; 51} 52 53.button2:hover { 54 color: #ffffff; 55 border: 1px solid #009087; 56} 57 58.button2:hover:before { 59 top: -35%; 60 background-color: #009087; 61 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 62} 63 64.button2:hover:after { 65 top: -45%; 66 background-color: #009087; 67 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 68} 69
16K views
16K views
Comments
Variations
1 MIT License