Completed
- Adding the SVG for this effect
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Animated Glowing Border - Easy to Customize CSS Effect
Automatically move to the next video in the Classroom when playback concludes
- 1 - Introduction
- 2 - What we’re starting with
- 3 - Adding the SVG for this effect
- 4 - CSS to get the SVG in position
- 5 - Using dasharray on the SVG to create the gowing segments
- 6 - Using dashoffet to move the segments
- 7 - Matching the border radius using rx
- 8 - Adding the blur and making the SVG bigger to see the glow
- 9 - Repositioning the lines on top of the button
- 10 - Fixing the hover so it’s only on the button itself
- 11 - Improving the glows
- 12 - Adding the fade/in out on the glows
- 13 - Customizing the line lengths
- 14 - Creating solid line variation
- 15 - Creating an offset variation
- 16 - Fixing the rx / border-radius
