マンガでわかるホームページ作成

CSSでhover時に矢印が伸びる・動くボタンの作り方

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

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

ボタン

html

<a href="#" class="button">ボタン</a>

CSS

.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;
}

解説

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

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

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

 

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

まとめ

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

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

関連記事