27 CSS Button Hover Effects 21 / 27
Rainbow Border Spin
A conic-gradient border spins continuously using the CSS mask-composite technique.
The code
<button class="bhe-21__btn">Hover Me</button>
<button class="bhe-21__btn">Hover Me</button>.bhe-21__btn {
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-21__btn {
position: relative;
border: none;
}
.bhe-21__btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
padding: 2px;
background: conic-gradient(#7c6cff, #ff6c8a, #2ecc8a, #f5a623, #7c6cff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s;
}
.bhe-21__btn:hover::before {
opacity: 1;
animation: spin 2s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.bhe-21__btn,
.bhe-21__btn * {
animation: none !important;
}
}
.bhe-21__btn {
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-21__btn {
position: relative;
border: none;
}
.bhe-21__btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
padding: 2px;
background: conic-gradient(#7c6cff, #ff6c8a, #2ecc8a, #f5a623, #7c6cff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s;
}
.bhe-21__btn:hover::before {
opacity: 1;
animation: spin 2s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.bhe-21__btn,
.bhe-21__btn * {
animation: none !important;
}
}