Button by cssbuttons-io
#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 cursor: pointer; 11 color: black; 12 z-index: 1; 13} 14 15.button:before { 16 content: ""; 17 position: absolute; 18 left: 50%; 19 transform: translateX(-50%) scaleY(1) scaleX(1.25); 20 top: 100%; 21 width: 140%; 22 height: 180%; 23 background-color: rgba(0, 0, 0, 0.05); 24 border-radius: 50%; 25 display: block; 26 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1); 27 z-index: -1; 28} 29 30.button:after { 31 content: ""; 32 position: absolute; 33 left: 55%; 34 transform: translateX(-50%) scaleY(1) scaleX(1.45); 35 top: 180%; 36 width: 160%; 37 height: 190%; 38 background-color: #39bda7; 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.button:hover { 46 color: #ffffff; 47 border: 1px solid #39bda7; 48} 49 50.button:hover:before { 51 top: -35%; 52 background-color: #39bda7; 53 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 54} 55 56.button:hover:after { 57 top: -45%; 58 background-color: #39bda7; 59 transform: translateX(-50%) scaleY(1.3) scaleX(0.8); 60} 61
20K views
20K views
MIT License