#e8e8e8
1.button { 2 display: inline-block; 3 padding: 12px 24px; 4 border: 1px solid #4f4f4f; 5 border-radius: 4px; 6 transition: all 0.2s ease-in; 7 position: relative; 8 overflow: hidden; 9 font-size: 19px; 10 color: black; 11 z-index: 1; 12} 13 14.button:before { 15 content: ""; 16 position: absolute; 17 left: 50%; 18 transform: translateX(-50%) scaleY(1) scaleX(1.25); 19 top: 100%; 20 width: 140%; 21 height: 180%; 22 background-color: rgba(0, 0, 0, 0.05); 23 border-radius: 50%; 24 display: block; 25 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 26 z-index: -1; 27} 28 29.button:after { 30 content: ""; 31 position: absolute; 32 left: 55%; 33 transform: translateX(-50%) scaleY(1) scaleX(1.45); 34 top: 180%; 35 width: 160%; 36 height: 190%; 37 background-color: #39bda7; 38 border-radius: 50%; 39 display: block; 40 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 41 z-index: -1; 42} 43 44.button:hover { 45 color: #ffffff; 46 border: 1px solid #39bda7; 47} 48 49.button:hover:before { 50 top: -35%; 51 background-color: #39bda7; 52 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 53} 54 55.button:hover:after { 56 top: -45%; 57 background-color: #39bda7; 58 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 59}
Comments
MIT License