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