ボタンをホバーすると文字と矢印アイコンが回転するアニメーション。
ホバーを解除すると同じように戻るのではなく、戻りはそのままにすることでホバーする度に回転し続けているような世界観をCSSのみのアニメーションで再現。
HTML
<a href="#" class="btnArrow2">
<span class="btnArrow2__txt">
<span class="btnArrow2__txt1">View more</span>
<span class="btnArrow2__txt2">View more</span>
</span>
<span class="btnArrow2__ico">
<svg class="btnArrow2__circle" width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18.5 0.866699C19.4282 0.330801 20.5718 0.330801 21.5 0.866699L37.5527 10.1343C38.4808 10.6702 39.0527 11.6612 39.0527 12.7329V31.2681L39.0459 31.4683C38.9796 32.462 38.4228 33.3643 37.5527 33.8667L21.5 43.1343L21.3232 43.229C20.4893 43.6389 19.5107 43.6389 18.6768 43.229L18.5 43.1343L2.44727 33.8667C1.51921 33.3309 0.947415 32.3397 0.947266 31.2681V12.7329C0.947266 11.6612 1.5192 10.6702 2.44727 10.1343L18.5 0.866699ZM21 1.73291C20.3812 1.37564 19.6188 1.37564 19 1.73291L2.94727 11.0005C2.32865 11.3578 1.94727 12.0185 1.94727 12.7329V31.2681C1.94742 31.9824 2.32866 32.6433 2.94727 33.0005L19 42.2681C19.6187 42.6252 20.3813 42.6252 21 42.2681L37.0527 33.0005C37.6713 32.6433 38.0526 31.9824 38.0527 31.2681V12.7329C38.0527 12.0185 37.6714 11.3578 37.0527 11.0005L21 1.73291Z" fill="#000"></path> </svg>
<svg class="btnArrow2__arrow1" width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.7578 17.7578C21.9921 17.5235 22.3712 17.5235 22.6055 17.7578L26.4238 21.5761C26.6581 21.8104 26.6581 22.1895 26.4238 22.4238L22.6055 26.2421C22.3712 26.4765 21.9921 26.4765 21.7578 26.2421C21.5235 26.0078 21.5235 25.6288 21.7578 25.3945L24.5518 22.5996L14 22.5996C13.6686 22.5996 13.4004 22.3313 13.4004 22C13.4004 21.6686 13.6686 21.4003 14 21.4003L24.5518 21.4003L21.7578 18.6054C21.5235 18.3711 21.5235 17.9921 21.7578 17.7578Z" fill="#000"></path> </svg>
<svg class="btnArrow2__arrow2" width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.7578 17.7578C21.9921 17.5235 22.3712 17.5235 22.6055 17.7578L26.4238 21.5761C26.6581 21.8104 26.6581 22.1895 26.4238 22.4238L22.6055 26.2421C22.3712 26.4765 21.9921 26.4765 21.7578 26.2421C21.5235 26.0078 21.5235 25.6288 21.7578 25.3945L24.5518 22.5996L14 22.5996C13.6686 22.5996 13.4004 22.3313 13.4004 22C13.4004 21.6686 13.6686 21.4003 14 21.4003L24.5518 21.4003L21.7578 18.6054C21.5235 18.3711 21.5235 17.9921 21.7578 17.7578Z" fill="#000"></path> </svg>
</span>
</span>
</a>CSS
.btnArrow2 {
display: inline-flex;
justify-content: flex-start;
align-items: center;
column-gap: 2em;
text-decoration: none;
color: #333;
}
.btnArrow2__txt {
line-height: 1;
height: 1em;
overflow: hidden;
}
.btnArrow2__txt1, .btnArrow2__txt2 {
display: block;
}
.btnArrow2 svg {
vertical-align: bottom;
}
.btnArrow2__ico {
position: relative;
overflow: hidden;
}
.btnArrow2__circle {
opacity: 0.25;
transition: opacity ease .3s;
}
.btnArrow2__arrow1, .btnArrow2__arrow2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btnArrow2__arrow2 {
left: -100%;
}
.btnArrow2:hover .btnArrow2__circle {
transform: rotate(60deg);
opacity: 1;
transition: all ease .3s;
}
.btnArrow2:hover .btnArrow2__txt1, .btnArrow2:hover .btnArrow2__txt2 {
transform: translateY(-100%);
transition: all ease .3s;
}
.btnArrow2:hover .btnArrow2__arrow1 {
left: 150%;
transition: all ease .3s;
}
.btnArrow2:hover .btnArrow2__arrow2 {
left: 50%;
transition: all ease .3s;
}
コメント