kyoheiex’s diary

ボタンに変化をつけアクティブにする

初めに

Progateを学習して自分が躓いたところを自分の言葉でアウトプットすることで学習効率を上げると共に備忘録がてらに書きます。

ボタンの背景をアクティブにすることで動きのあるボタンを作るための材料を作る。

クリック時にボタンの背景を赤くする

*今回はわかりやすくするためにクリック時を赤にしました。

ボタンに変化をつける前のプレビュー

ボタンに変化をつけた後のプレビュー

ボタンに変化をつける前のHTML、CSS

HTML

<div class="login-bttn">
      <a href="#" class="login-btn">log in</a>
    </div>

CSS

.login-bttn{
  text-align:center;
  padding:50px;
  
}

.login-btn{
  padding:20px 30px;
  box-shadow: 0 7px #1a7940;
  background-color:#4dca88;
}

セレクタに:activeを使うことでクリック時のみにアクティブにする

CSS

.login-bttn{
  text-align:center;
  padding:50px;
  
}

.login-btn{
  padding:20px 30px;
  box-shadow: 0 7px #1a7940;
  background-color:#4dca88;
}

.login-btn:active{
  background-color :red;
}

今回はボタンの部分のみアクティブになって欲しいのでlogin-btnに:activeを用いた。

*もし背景全体をアクティブにしたければlogin-btnの親要素である、login-bttnに:activeを用いると良い。

結語

ボタンに変化をつけたいときはセレクタに:activeを用いる。
元々記述しているセレクタに記述するのではなく、:activeようにアクティブにしたいセレクタを記述して:activeを用いる。
アクティブにしたい範囲をきちんと明確にして用いることが大切である。