【HTML,CSS】ボタンにマウスを置くと、指定した時間で色を変える方法
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で出来る範囲をもう少し学んでいきたいなぁと思います。