【CSS】hoverで背景色が横に移動するCSS

仕事でCSSを組んでいく際、
最初は簡易的に組んで、その後、動きなどを付けた細かい設定を追加していくと素早く効率的にコーディングできます。

hoverで背景色が付くCSSの設定を元に
hoverで背景色が横に移動して光がキラリと走るような挙動を実装するCSSの設定をしていく方法を例に見てみましょう。

通常のhover

.box a.link {
    width: 280px;
    font-size: 14px;
    padding: 10px 60px;
    display: block;
    border: 1px solid #000;
    border-radius: 100px;
    margin: 0 auto;
}

.box a.link:hover {
    background: #eee;
}

背景色が横に移動するhover

.box a.link {
    width: 280px;
    font-size: 14px;
    padding: 10px 60px;
    display: block;
    border: 1px solid #000;
    border-radius: 100px;
    margin: 0 auto;

    text-align: center;
    color: #000;
    text-decoration: none;
    position: relative;/* 擬似要素の基準点 */
    overflow: hidden;/* 擬似要素がはみ出ないようにする */
}

.box a.link span {
    z-index: 2;/* リンクテキストを上に */
    position: relative;
}

.box a.link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;/* 初期状態はボタンの左外側 */
    width: 100%;
    height: 100%;
    background: #eee;
    transition: transform 0.5s ease;
    z-index: 1;
}

.box a.link:hover::before {
    transform: translateX(100%);/* 左から右に移動する */
}

実装のポイント

1.擬似要素 ::before:
背景を左端からスタートするように設定します(left: -100%)。
ホバー時に transform: translateX(100%) を使って右に移動させます。

2.overflow: hidden:
擬似要素がボタンの範囲を超えないようにしています。

3.transition:
transform に対して滑らかなアニメーション(0.5秒)を設定しています。

動きの説明

・ホバーすると、ボタンの背景が左から右にスライドして走り抜けるような効果になります。
・テキストはそのまま表示され、アニメーションの背景色だけが動きます。

このCSSをHTMLと合わせて使用すると、希望のボタン効果が実現できます!

関連記事

コメントを残す

*