Recently, @avstorm made a cool button design on figma and I attempted to make it using HTML and CSS. this body of text is my attempt at breaking down the concept used. They key to achieving this effect is in the following: `@keyframes, stroke-dasharray, stoke-dashoffset, SVGs`. Now the SVG has a stroke, and this stroke can be manipulated via CSS. from width, path to even the shape itself. The idea is to target the stroke and manipulate it using key frame... what this means is the electric animation is continuously running but the opacity should then be set to zero(0). now on hover, that opacity can be set to `opacity: 1` which then makes the animation visible. ### stroke-dasharry The `stroke-dasharray` attribute is used to set a dash pattern on the stroke path. ie, set line pattern = dash. the value here would determine the length of each dash and the space between dashes. consider the folling SVG as example: this will be referenced later: ```html ...

stroke-dasharray: 0

stroke-dashoffset: 0

stroke-dasharray: 10

stroke-dashoffset: 0

stroke-dasharray: 250

stroke-dashoffset: 0

stroke-dasharray: 250

stroke-dashoffset: 250

stroke-dasharray: 250

stroke-dashoffset: 100

stroke-dasharray: 250

stroke-dashoffset: -100

... ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wb7wzw8mdza9dz2e2p3u.png) ### stroke-dashoffset the `stroke-dashoffset` is used to offset the line or path itself. we will use an example svg line with a width of `500px`. offseting the stroke dash moves the the whole SVG forward or backward. think of it like moving an item in a masked area. see the illustration below ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdu29rzi2q1zkzflu6i4.png) Now all we have to use CSS and change the stroke dash offset and add an animation and it would give us the illusion that the line is moving by adding the following line of code: ```css @keyframes identifier { to{ stroke-dashoffset: 0; } } line{ animation-name: identifier; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; } ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k533wu8nj3l5tzfaiwe9.gif) Next, all we have to do is toggle to opacity of `.line2` on hover of `.line1` ```css .line2 { pointer-events: none; opacity: 0; } .line1:hover ~ .line2{ opacity: 1; } ``` ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8pz9dodu58nrkzevl24.gif) With these being said or typed lol. we can apply this to the electric button effect. ## The Electric button effect #### Step 1: create the `button` First, create two buttons, one acts as the glow effect and the other holds the electric effect. ```html ...

... ``` Next, copy the SVG as an SVG and paste it inside the button tag: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0936meujjcb85wgp36b.gif) do this for all the strokes/svgs. you can use this [figma file here](https://www.figma.com/file/hRNEnbaRtBOtL9xiyzg0bz/electric-button?node-id=0%3A1&t=RGAY64L4chjtwUWG-1) or create your own after pasting the SVGs inside your first button, you can then add `class` and `id` to differentiate the SVGs and the code would look like what we have below: ```html ... ... ``` Next, add three span inside the button tag that will form the dots to give it more effect. ```html ... ... ``` and we are done with the HTML. #### Adding CSS First we add some styling to make our work area look good ```css *{ margin: 0; padding: 0; box-sizing: border-box; transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: rgb(5, 27, 37); transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); } .buttonHolder{ position: relative; } ``` Next, we make sure the SVG is set to absoolute: ```css ... svg{ position: absolute; } ``` Next, we style the two buttons from earlier ```css ... .electric{ padding: 20px 50px; border-radius: 100px; cursor: pointer; background-color: rgba(106, 123, 252, 0.13); border: 2px solid rgb(125, 140, 255); color: white; position: relative; filter: blur(0px); } #electric2{ position: absolute; top: 0; left: 0; filter: blur(1px); background-color: rgba(106, 123, 252, 0.414); border: 2px solid rgb(125, 140, 255); color: rgb(182, 191, 255); /* display: none; */ z-index: -1; } ``` Next, we add our `@keyframe` for animation ```css ... @keyframes dash { to { stroke-dashoffset: 0; } } ``` Now we can style the SVGs themselves and link them to the animation/ keyframe following the concept learnt from earler: `stroke-dasharry` and `stroke-dashoffset` ```css ... .yellow{ width: 110%; stroke-dasharray: 300; stroke-dashoffset: 1000; animation: dash 1s linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; } .blue{ width: 110%; stroke-dasharray: 400; stroke-dashoffset: 1000; animation: dash 1.2s linear; animation-iteration-count: infinite; animation-direction: alternate-reverse; } ``` Next, we position the SVG to fit in the button area ```css #y1{ top: -115%; left: -5%; filter: blur(.5px); } #y2{ width: 120%; left: -10%; top: -155%; filter: brightness(1); } #b1{ left: -5%; top: -125%; /* filter: blur(.5px) */ } #b2{ left: -10%; top: -165%; width: 120% /* filter: blur(.5px) */ } ``` Now we add style to the dots ```css @keyframes dot1 { from{ bottom: 0%; left: 10%; opacity: 1; } to{ bottom: -30%; left: 0%; opacity: 0; } } @keyframes dot2 { from{ top: 0%; left: 30%; opacity: 1; } to{ top: -30%; left: 40%; opacity: 0; } } @keyframes dot3 { from{ top: 0%; left: 80%; opacity: 1; } to{ top: -30%; left: 80%; opacity: 0; } } @keyframes dot4 { from{ bottom: 20%; left: 100%; opacity: 1; } to{ bottom: 30%; left: 120%; opacity: 0; } } .part{ content: ' '; width: 3px; height: 3px; border-radius: 5px; background-color: rgb(183, 226, 255); z-index: 2; position: absolute; filter: blur(1px); display: none; } #part1{ animation: dot1; transform-origin: center; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-iteration-count: infinite; } #part2{ animation: dot2; transform-origin: center; animation-duration: 1.6s; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-iteration-count: infinite; } #part3{ animation: dot3; transform-origin: center; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-iteration-count: infinite; } #part4{ animation: dot4; transform-origin: center; animation-duration: 1.5s; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-iteration-count: infinite; } .buttonHolder{ width: max-content; max-height: 20px; } ``` finally, we add the visibility and hover effect for the SVG, the button and the dots using the `.hide` class we created. ```css .hide{ opacity: 0; } #electric:hover + .hide{ opacity: 1 ; } #electric:hover .hide{ opacity: 1 ; } .electric:hover .part{ display: flex; } ``` and we should get our final result. you can check out the full code on [codepen.io](https://codepen.io/binadiegha/pen/ExpdmzP) to experiment with it Thanks

binadiegha

Creating an electic button effect with HTML, CSS and SVG

Join Our Newsletter. No Spam, Only the good stuff.