A border trace hover effect built with pure HTML and CSS that animates an outline or border as it visually traces around an element during interaction. It adds structured edge emphasis without affecting layout dimensions.
Usage
Use this component when UI elements require edge focused hover animation, such as buttons, cards, feature blocks, or navigation items that benefit from subtle outline motion.
Implementation
The effect is achieved using pseudo elements and controlled border animations, often combined with transition timing adjustments to simulate a tracing motion. CSS ensures smooth animation flow and consistent responsiveness across devices.
HTML
<div class="hover-trace">
Hover me
</div>CSS
.hover-trace {
width: 200px;
padding: 0.75rem;
border-radius: 12px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
color: #111827;
font-size: 13px;
font-weight: 500;
}
.hover-trace::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 2px solid transparent;
background: linear-gradient(90deg, #6366f1, #22d3ee) border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.hover-trace:hover::after {
opacity: 1;
}
@media (prefers-color-scheme: dark) {
.hover-trace {
background: #1f2937;
color: #e5e7eb;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated border tracing techniques
- Enhances edge based visual interaction clarity
- Fully responsive and lightweight
- Suitable for buttons, cards, and navigation items
- Easy to customize border thickness and animation speed
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.