#212121
1button { 2 font: 18px; 3 color: #fff; 4 text-decoration: none; 5 text-transform: uppercase; 6 padding: 5px 20px; 7 position: relative; 8 overflow: hidden; 9 border-radius: 5px; 10 transition: 0.2s; 11 transform: scale(2); 12 border: 1px solid; 13} 14 15button span { 16 position: relative; 17 z-index: 0; 18 display: flex; 19 color: #fff; 20} 21 22button .liquid { 23 position: absolute; 24 top: -50px; 25 left: 0; 26 width: 100%; 27 height: 150px; 28 background: #FF229F; 29 box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7); 30 z-index: -1; 31 transition: 0.6s; 32} 33 34button .liquid::after, 35button .liquid::before { 36 position: absolute; 37 content: "πͺ"; 38 width: 200%; 39 height: 200%; 40 top: 0; 41 left: 0; 42 transform: translate(-25%, -75%); 43} 44 45button .liquid::after { 46 border-radius: 45%; 47 background: rgba(20, 20, 20, 1); 48 box-shadow: 0 0 10px 5px #33053C, inset 0 0 5px #33053C; 49 animation: animate 5s linear infinite; 50 opacity: 0.8; 51} 52 53button .liquid::before { 54 content: "π"; 55 border-radius: 40%; 56 box-shadow: 0 0 10px rgba(26, 26, 26, 0.5), 57 inset 0 0 5px rgba(26, 26, 26, 0.5); 58 background: rgba(26, 26, 26, 0.5); 59 animation: animate_3881 7s linear infinite; 60} 61 62@keyframes animate_3881 { 63 0% { 64 transform: translate(-25%, -75%) rotate(0); 65 } 66 67 100% { 68 transform: translate(-25%, -75%) rotate(360deg); 69 } 70} 71 72button:hover .liquid { 73 top: -120px; 74} 75 76button:hover { 77 box-shadow: 0 0 5px #33053C, inset 0 0 5px #33053C; 78 transition-delay: 0.2s; 79} 80
Β
Comments
MIT License