Gombanimációk
Kibomló sarok
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<button class="we-btn-corner" type="button">
<span class="we-btn-corner-shape"></span>
<span class="we-btn-corner-text">Felfedezem</span>
<span class="we-btn-corner-arrow">→</span>
</button>
.we-btn-corner {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
min-width: 185px;
height: 54px;
padding: 0 27px;
border: 1px solid rgba(63,159,99,.35);
border-radius: 10px;
background: #101713;
color: #f1f3ee;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: .4px;
cursor: pointer;
overflow: hidden;
transition:
transform .7s cubic-bezier(.22,1,.36,1),
border-radius .7s ease,
box-shadow .7s ease;
}
.we-btn-corner-shape {
position: absolute;
left: -35px;
bottom: -35px;
width: 75px;
height: 75px;
border-radius: 50%;
background: #3f9f63;
transform: scale(1);
transition:
transform 1.05s cubic-bezier(.22,1,.36,1),
width 1.05s cubic-bezier(.22,1,.36,1),
height 1.05s cubic-bezier(.22,1,.36,1),
border-radius 1.05s ease;
}
.we-btn-corner-text,
.we-btn-corner-arrow {
position: relative;
z-index: 2;
transition:
transform .85s cubic-bezier(.22,1,.36,1),
color .6s ease;
}
.we-btn-corner-arrow {
font-size: 20px;
line-height: 1;
}
.we-btn-corner:hover {
transform:
translateY(-4px);
border-radius: 17px;
box-shadow:
0 20px 42px rgba(0,0,0,.42);
}
.we-btn-corner:hover .we-btn-corner-shape {
width: 420px;
height: 420px;
transform:
translate(55px, -55px);
border-radius: 50%;
}
.we-btn-corner:hover .we-btn-corner-text {
color: #08110b;
transform:
translateX(-4px);
}
.we-btn-corner:hover .we-btn-corner-arrow {
color: #08110b;
transform:
translateX(8px)
scale(1.12);
}
.we-btn-corner:active {
transform:
translateY(-1px)
scale(.97);
}
Ehhez az animációhoz nincs külön JavaScript.