Button by abuayaan01
#212121
1.button { 2 background-color: #000; 3 border: 0px; 4 outline: 0px; 5 color: #fff; 6 width: 200px; 7 padding: 20px; 8 border-radius: 50px; 9 position: relative; 10 overflow: hidden; 11 cursor: pointer; 12} 13 14.liquid { 15 background-color: #2893eb; 16 width: 200px; 17 height: 70px; 18 position: absolute; 19 bottom: 0; 20 left: 0; 21 box-shadow: inset 5px -5px 25px #104e81, 22 inset -5px 0px 25px #104e81; 23} 24 25.liquid::after { 26 content: ''; 27 width: 450px; 28 height: 400px; 29 background: #000; 30 z-index: 1; 31 position: absolute; 32 left: -110px; 33 top: -380px; 34 border-radius: 45%; 35 animation: animate 5s linear 2s infinite; 36} 37 38.liquid::before { 39 content: ''; 40 width: 450px; 41 height: 400px; 42 background-color: rgb(68, 160, 235); 43 z-index: 1; 44 position: absolute; 45 left: -110px; 46 top: -380px; 47 border-radius: 40%; 48 animation: animate 5s linear 1.8s infinite; 49} 50 51.btn-txt { 52 position: relative; 53 z-index: 1; 54 font-size: 22px; 55 font-family: sans-serif; 56 letter-spacing: 2px; 57} 58 59@keyframes animate { 60 from { 61 transform: rotate(0deg); 62 } 63 64 to { 65 transform: rotate(360deg); 66 } 67} 68 69
1.1K views
1.1K views
MIT License