27 CSS Button Hover Effects 08 / 27
Magnetic Border
A conic-gradient border spins into view on hover and the button lifts with a coloured glow.
The code
<button class="bhe-08__wrap"> <span class="bhe-08__inner">Magnetic Border</span> </button>
<button class="bhe-08__wrap">
<span class="bhe-08__inner">Magnetic Border</span>
</button>.bhe-08__wrap {
font-family: inherit;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-08__wrap {
position: relative;
padding: 2px;
border: none;
background: none;
cursor: pointer;
border-radius: 8px;
display: inline-block;
}
.bhe-08__wrap::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 10px;
background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
opacity: 0;
transition: opacity 0.3s;
animation: border-spin 3s linear infinite paused;
}
.bhe-08__wrap:hover::before {
opacity: 1;
animation-play-state: running;
}
@keyframes border-spin {
to {
transform: rotate(360deg);
}
}
.bhe-08__inner {
display: block;
padding: 12px 32px;
border-radius: 7px;
background: #111118;
color: #fff;
font-size: 14px;
font-weight: 600;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.bhe-08__wrap:hover .bhe-08__inner {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(124, 108, 255, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.bhe-08__wrap,
.bhe-08__wrap * {
animation: none !important;
}
}
.bhe-08__wrap {
font-family: inherit;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-08__wrap {
position: relative;
padding: 2px;
border: none;
background: none;
cursor: pointer;
border-radius: 8px;
display: inline-block;
}
.bhe-08__wrap::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 10px;
background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
opacity: 0;
transition: opacity 0.3s;
animation: border-spin 3s linear infinite paused;
}
.bhe-08__wrap:hover::before {
opacity: 1;
animation-play-state: running;
}
@keyframes border-spin {
to {
transform: rotate(360deg);
}
}
.bhe-08__inner {
display: block;
padding: 12px 32px;
border-radius: 7px;
background: #111118;
color: #fff;
font-size: 14px;
font-weight: 600;
transition:
transform 0.3s,
box-shadow 0.3s;
}
.bhe-08__wrap:hover .bhe-08__inner {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(124, 108, 255, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.bhe-08__wrap,
.bhe-08__wrap * {
animation: none !important;
}
}
More from 27 CSS Button Hover Effects
Typewriter RetypeRipple WaveCursor SpotlightMinimalist Border & Outline Drawing Hover EffectsModern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button EffectsLiquid FillGlitch SliceNeon Pulse
View the full collection →