Button Border Draw
Hover to triggerA border scales out from the centre on hover — for secondary CTAs.
Move the pointer over the box
Triggered by
:hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Button Border Draw */
.anim-btn-border-draw {
position: relative;
}
.anim-btn-border-draw::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #93c5fd;
border-radius: inherit;
transform: scale(.8);
opacity: 0;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
pointer-events: none;
}
.anim-btn-border-draw:hover::before {
transform: scale(1.16);
opacity: 1;
}