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