[CSS] マウスオーバーしたときにシャキンと色が変わるボタンリンク

公開日:2022/05/13

マウスオーバー時にボタンの背景色をサッと切り替えるボタンです。

ただ背景色を変えるよりも目立ちやすいボタンにすることができます。

動作イメージ

サンプルコード

html

<a href="" class="shakin">ボタン</a>

CSS

.shakin {
    display: inline-block;
    position: relative;
    padding: 1em;
    width: 300px;
    border: 2px solid #000;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
.shakin::before {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: -1;
    width: 0px;
    background-color: #000;
    transition: width 0.2s;
    content: "";
}
.shakin:hover {
    color: #fff;
}
.shakin:hover::before {
    width: 100%;
}

背景色をbefore疑似要素で指定し、マウスオーバーしたときにwidthを0px→100%に変更します。

widthの変化をtransitionでアニメーションさせることで、背景色がサッと切り替わるようにしています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。