3.1K views
1.voltage-button { 2 position: relative; 3} 4 5.voltage-button button { 6 color: white; 7 background: #0D1127; 8 padding: 1rem 3rem 1rem 3rem; 9 border-radius: 5rem; 10 border: 5px solid #5978F3; 11 font-size: 1.2rem; 12 line-height: 1em; 13 letter-spacing: 0.075em; 14 transition: background 0.3s; 15} 16 17.voltage-button button:hover { 18 cursor: pointer; 19 background: #0F1C53; 20} 21 22.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots { 23 opacity: 1; 24} 25 26.voltage-button svg { 27 display: block; 28 position: absolute; 29 top: -0.75em; 30 left: -0.25em; 31 width: calc(100% + 0.5em); 32 height: calc(100% + 1.5em); 33 pointer-events: none; 34 opacity: 0; 35 transition: opacity 0.4s; 36 transition-delay: 0.1s; 37} 38 39.voltage-button svg path { 40 stroke-dasharray: 100; 41 filter: url("#glow"); 42} 43 44.voltage-button svg path.line-1 { 45 stroke: #f6de8d; 46 stroke-dashoffset: 0; 47 animation: spark-1 3s linear infinite; 48} 49 50.voltage-button svg path.line-2 { 51 stroke: #6bfeff; 52 stroke-dashoffset: 500; 53 animation: spark-2 3s linear infinite; 54} 55 56.voltage-button .dots { 57 opacity: 0; 58 transition: opacity 0.3s; 59 transition-delay: 0.4s; 60} 61 62.voltage-button .dots .dot { 63 width: 1rem; 64 height: 1rem; 65 background: white; 66 border-radius: 100%; 67 position: absolute; 68 opacity: 0; 69} 70 71.voltage-button .dots .dot-1 { 72 top: 0; 73 left: 20%; 74 animation: fly-up 3s linear infinite; 75} 76 77.voltage-button .dots .dot-2 { 78 top: 0; 79 left: 55%; 80 animation: fly-up 3s linear infinite; 81 animation-delay: 0.5s; 82} 83 84.voltage-button .dots .dot-3 { 85 top: 0; 86 left: 80%; 87 animation: fly-up 3s linear infinite; 88 animation-delay: 1s; 89} 90 91.voltage-button .dots .dot-4 { 92 bottom: 0; 93 left: 30%; 94 animation: fly-down 3s linear infinite; 95 animation-delay: 2.5s; 96} 97 98.voltage-button .dots .dot-5 { 99 bottom: 0; 100 left: 65%; 101 animation: fly-down 3s linear infinite; 102 animation-delay: 1.5s; 103} 104 105@keyframes spark-1 { 106 to { 107 stroke-dashoffset: -1000; 108 } 109} 110 111@keyframes spark-2 { 112 to { 113 stroke-dashoffset: -500; 114 } 115} 116 117@keyframes fly-up { 118 0% { 119 opacity: 0; 120 transform: translateY(0) scale(0.2); 121 } 122 123 5% { 124 opacity: 1; 125 transform: translateY(-1.5rem) scale(0.4); 126 } 127 128 10%, 100% { 129 opacity: 0; 130 transform: translateY(-3rem) scale(0.2); 131 } 132} 133 134@keyframes fly-down { 135 0% { 136 opacity: 0; 137 transform: translateY(0) scale(0.2); 138 } 139 140 5% { 141 opacity: 1; 142 transform: translateY(1.5rem) scale(0.4); 143 } 144 145 10%, 100% { 146 opacity: 0; 147 transform: translateY(3rem) scale(0.2); 148 } 149} 150
MIT License