Button by TemRevil
#e8e8e8
1.button { 2 position: relative; 3 z-index: 1; 4 padding: 10px 20px; 5 background-color: transparent; 6 color: #124; 7 font-size: 28px; 8 border: none; 9 border-radius: 5px; 10 transition: 0.15s 0s linear; 11 cursor: pointer; 12 overflow: hidden; 13} 14.button:hover { 15 color: #fff; 16} 17.button:active { 18 scale: 0.98; 19} 20.b-hover { 21 position: relative; 22 bottom: -45px; 23} 24.button:hover .b-hover { 25 animation: b-a 0.2s linear forwards; 26} 27 28.cir-1 { 29 width: 100px; 30 height: 100px; 31 position: absolute; 32 z-index: -6; 33 left: -120px; 34 bottom: -20px; 35 background-color: #3395ffa1; 36 border-radius: 50%; 37} 38.button:hover .cir-1 { 39 animation: cir-1-border 0.5s 0.3s linear forwards; 40} 41.cir-2 { 42 width: 100px; 43 height: 100px; 44 position: absolute; 45 z-index: -2; 46 left: -140px; 47 bottom: -20px; 48 background-color: #3358ffa1; 49 border-radius: 50%; 50} 51.cir-3 { 52 width: 100px; 53 height: 100px; 54 position: absolute; 55 z-index: -3; 56 left: -160px; 57 bottom: -20px; 58 background-color: #6333ffa1; 59 border-radius: 50%; 60} 61.cir-4 { 62 width: 100px; 63 height: 100px; 64 position: absolute; 65 z-index: -4; 66 left: -180px; 67 bottom: -20px; 68 background-color: #e433ffa1; 69 border-radius: 50%; 70} 71.cir-5 { 72 width: 100px; 73 height: 100px; 74 position: absolute; 75 z-index: -5; 76 left: -200px; 77 bottom: -20px; 78 background-color: #ff33aab2; 79 border-radius: 50%; 80} 81.cir-6 { 82 width: 100px; 83 height: 100px; 84 position: absolute; 85 z-index: -6; 86 left: -220px; 87 bottom: -20px; 88 background-color: #ff0084; 89 border-radius: 50%; 90} 91.button:hover .cir-6 { 92 animation: cir-6-border 0.5s 0.3s linear forwards; 93} 94.filter { 95 animation: blur 0.6s 1s infinite linear alternate; 96} 97@keyframes b-a { 98 0% { 99 left: 0; 100 } 101 100% { 102 left: 200px; 103 } 104} 105 106@keyframes cir-1-border { 107 0% { 108 border-top-right-radius: 50%; 109 border-bottom-right-radius: 50%; 110 } 111 100% { 112 border-top-right-radius: 0px; 113 border-bottom-right-radius: 0px; 114 } 115} 116@keyframes cir-6-border { 117 0% { 118 border-top-left-radius: 50%; 119 border-bottom-left-radius: 50%; 120 } 121 100% { 122 border-top-left-radius: 0px; 123 border-bottom-left-radius: 0px; 124 } 125} 126 127@keyframes blur { 128 0% { 129 filter: none; 130 } 131 100% { 132 filter: blur(3px); 133 } 134} 135
44 views
44 views
MIT License