【CSS】hover時に矢印がアニメーションで伸びる方法

ボタンの右に矢印があるデザインはよく見かけますね。
マウスを乗せたとき矢印が右に伸びるとクリックしたくなるものです。

ここではCSSでhover時に矢印が伸びる・動くアニメーションをするボタンの作り方を説明します。

三角矢印が動くボタン

ボタン

<style>
.button{
    display:inline-block;
    background:#d13415;
    width: 100px;
    padding:10px 30px 10px 20px;
    text-align:center;
    color:#FFF;
    margin:5px;
    border:1px solid;
    cursor:pointer;
    position: relative;
    text-decoration: none;
}
.button::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent #FFF #FFF;
    transform: rotate(-135deg);
    transition: .3s;
}
.button:hover::after{
    right: 10px;
}
</style>
<a href="#" class="button">ボタン</a>

右側に矢印のあるボタンをまず作りましょう。

ボタンにtransitionを指定し動きをつけましょう。

ボタンにマウスが乗ったとき、つまり「.button:hover」のときの矢印の位置をさらに右側に指定します。

具体的にはrightの数値を変えることで水平方向に動かしています。

矢印を「→」などの長い矢印にする方法も紹介しています。

片側矢印が伸びるボタン

ボタン

<style>
.button2{
    display:inline-block;
    background:#d13415;
    width: 100px;
    padding:10px 30px 10px 20px;
    text-align:center;
    color:#FFF;
    margin:5px;
    border:1px solid;
    cursor:pointer;
    position: relative;
    text-decoration: none;
}
.button2::after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    transform: skew(45deg);
    transition: .3s;
}
.button2:hover::after{
    right: 10px;
    width: 30px;
}
</style>
<a href="#" class="button2">ボタン</a>
</body>

hoverしたとき、矢印を右に10px動かします。

これだけだとただ動いただけですので、widthも伸ばすことで矢印の矢尻は動かず矢先の方向へ伸びたように見えます。

両側矢印が伸びるボタン

ボタン

<style>
.button3{
    display:inline-block;
    background:#d13415;
    width: 100px;
    padding:10px 30px 10px 20px;
    text-align:center;
    color:#FFF;
    margin:5px;
    border:1px solid;
    cursor:pointer;
    position: relative;
    text-decoration: none;
}
.button3::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 20px;
    height: 2px;
    background: #FFF;
    transition: .3s;
}
.button3::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 8px;
    height: 8px;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    transform: rotate(-135deg);
    transition: .3s;
}
.button3:hover::before{
    right: 10px;
    width: 30px;
}
.button3:hover::after{
    right: 10px;
}
</style>
<a href="#" class="button3">ボタン</a>

先の2つを組み合わせた形です。ー＞この2つを組み合わせて矢印を作っています。

hoverしたら矢先は右に移動します。矢の棒部分は伸びつつ右に移動しています。

まとめ

transitionで動きをつけ、hover時に位置を変更したり幅を伸ばすことで矢印が伸びるようになります。

以上、CSSでhover時に矢印が伸びる・動くボタンの作り方でした。