<a class="bt" href="#"><i></i><i></i><i></i><i></i>Hover me</a>About this border
A button whose outline draws itself around the edge on hover, using four thin spans that grow in sequence.
How it works
Four empty elements sit along the edges of the link. Each starts with zero width or height, and on hover they grow to full length in sequence, top, right, bottom and left, thanks to staggered transition delays. The effect draws a line around the button as if tracing it, and resets instantly when the pointer leaves.
Ways to customise it
- Change #38bdf8 to colour the line.
- Alter the 0.25s transition and delays to trace faster or slower.
- Increase the line thickness from 2px.
Good to know
It uses links, so keyboard focus should show the same effect: add :focus-visible to the hover selectors if you need it. Hover effects do not exist on touch, so the button must still look complete without it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.