【HTML,CSS】ボタンにマウスを置くと、指定した時間で色を変える方法

2023年4月19日 2023年4月16日

Ryouji

WEBサイトを動的に動かすためにはJavaScriptが必要な場合が多いのですが、簡単なことならCSSでも出来る。ということを最近して、自分のWEBサイト作成をしながら学んでいます。
今回は、そんな学んでいる中でボタンの色をじわっと変えたかったので、その方法をメモしておきます。

作るもの

ボタンにマウスをホバー（上に置いてクリックしない状態)すると、上図のように背景や文字色を変える。

実装方法

HTML

<button  class = solidbtn--blue type="button" name="detail" value="value">さらに読み込む</button>

HTMLはただのボタン。ボタンに紐づけるクラス名は適当に名付けておく。

CSS

/*=======こちらは基本的なボタンの設定==========*/
.solidbtn--blue,
a.solidbtn--blue {
    font-size: 1.5rem;
    padding: 5px;
    border:none;
    border-bottom: 2px solid #95C7EB;
}

/*=======今回の主題のホバーした時の色変化==========*/
.solidbtn--blue:hover,
a.solidbtn--blue:hover {
    color: #fff;
    animation-name:solidbtn-color;
    animation-duration: 1s;
    animation-timing-function:ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes solidbtn-color {
    0% {
        color: #000000;
        background-color:white;
    }
    50% {
        color: #a4a4a4;
        background-color:#aad2ee ;
    }
    100% {
        color: #fff;
        background-color: #95C7EB;
    }
}

疑似クラス　:hover
指定のセレクタにマウスが配置している状態になると、動作する
animation-name:solidbtn-color;
変化のアニメーションを指定する。下部にある「@keyframes solidbtn-color」を呼び出している
animation-duration
「@keyframes solidbtn-color」で定義したアニメーション情報を動かす感覚。1sだと一秒間で動作させる。
animation-timing-function:ease-in-out;　animation-fill-mode: forwards;
アニメーションの変化の仕方を変えることが出来る。オプションは沢山あるので今回は割愛。
@keyframes solidbtn-color
アニメーションが段階的に動いて、どのように変化するのか定義できる。サンプルだと0%,50%,100%時点の文字色と背景色を変えている。

作成してみて

簡単ですが、動的っぽいものをCSSで作れました。これを応用すれば、WEBページをロードした際に、背景の図形を自動で動かしたりできると思う。（デザイン的なセンスが必須）
簡単な図形やオブジェクトの操作でJavaScriptを作るのも面倒そうなので、CSSで出来る範囲をもう少し学んでいきたいなぁと思います。