ポインターを当てるとボタンの色を変えるには
このガイドでは、ボタンに当てたときに2つの色の間で滑らかに色が変わるようにする方法を紹介します。
ボタンの例では、:hover 動的擬似クラスに異なる背景色を定義することで、ボタンの背景を変更することができます。しかし、ボタンの上に当てた場合、背景色は新しい色に切り替わるようになります。より滑らかに変化させるためには、CSS トランジションを使用することができます。
トランジションの使用
ホバー状態に必要な色を追加した後、ボタンのルールに transition プロパティを追加します。単純なトランジションの場合、transition の値は、このトランジションを適用したいプロパティの名前と、トランジションのために要する時間です。
:active と :focus の擬似クラスでは、transition プロパティは none に設定されており、クリックされるとボタンはアクティブ状態に移行します。
この例では、トランジションに 1 秒かけていますが、これを変更することで、スピードの変化による違いを確認することができます。
html
<div class="wrapper">
<button class="fade">マウスカーソルを載せてください</button>
</div>
css
.fade {
background-color: #db1f48;
color: #fff;
transition: background-color 1s;
}
.fade:hover {
background-color: #004369;
}
.fade:focus,
.fade:active {
background-color: black;
transition: none;
}
メモ:
transition プロパティは、transition-delay、transition-duration、transition-property、transition-timing-function の一括指定です。トランジションを調整する方法を調べるには、MDNでこれらのプロパティのページを参照してください。