Gombanimációk
Körbejáró keret
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<button class="we-btn-orbit">
<span class="we-btn-orbit-border"></span>
<span class="we-btn-orbit-text">
Felfedezem
</span>
<span class="we-btn-orbit-arrow">
→
</span>
</button>
.we-btn-orbit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
min-width: 175px;
height: 54px;
padding: 0 25px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 28px;
background: #0d1518;
color: #f2f4f0;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
overflow: hidden;
transition:
transform .45s cubic-bezier(.22,1,.36,1),
box-shadow .5s ease;
}
.we-btn-orbit-border {
position: absolute;
inset: -2px;
border-radius: inherit;
background:
conic-gradient(
from 0deg,
transparent 0deg,
transparent 300deg,
#8ee8d4 325deg,
#ffffff 340deg,
transparent 355deg
);
opacity: 0;
animation:
orbitButton 1.8s linear infinite paused;
}
.we-btn-orbit-border::after {
content: "";
position: absolute;
inset: 2px;
border-radius: 26px;
background: #0d1518;
}
.we-btn-orbit-text,
.we-btn-orbit-arrow {
position: relative;
z-index: 3;
transition:
transform .45s cubic-bezier(.22,1,.36,1),
color .35s ease;
}
.we-btn-orbit-arrow {
font-size: 19px;
}
.we-btn-orbit:hover {
transform:
translateY(-3px);
box-shadow:
0 16px 35px rgba(0,0,0,.4);
}
.we-btn-orbit:hover .we-btn-orbit-border {
opacity: 1;
animation-play-state: running;
}
.we-btn-orbit:hover .we-btn-orbit-text {
transform:
translateX(-3px);
}
.we-btn-orbit:hover .we-btn-orbit-arrow {
transform:
translateX(6px)
scale(1.1);
}
.we-btn-orbit:active {
transform:
translateY(0)
scale(.97);
}
@keyframes orbitButton {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Ehhez az animációhoz nincs külön JavaScript.