HTMLで押したボタンの色を変える方法

Aタグではできない(と思う)

まず前提としてAタグではできません(正確にはできないと言う訳でではなく探したらやり方があるのかもしれません)。そう言う訳なので、ラジオボタン要素を使います。

ラジオボタン要素の書き方

ラジオボタン要素の書き方の紹介です。

HTML

<input type="radio" name="yesorno" id="yes" value="yes">
<label for="yes" class="btn">yes</label>
<input type="radio" name="yesorno" id="no" value="no">
<label for="no" class="btn">no</label>

ラジオボタンだけを追加するならこのコードだけで大丈夫です。labelのforのところにはinputのidに書いたものを入れてください。
(https://jsfiddle.net/ このページでコードのチェックができます)

ラジオボタン要素の装飾

コレだけだとボタンっぽくないのでcssで装飾します。

css

.btn {
  background-color: #f08400;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
}

.btn:hover {
  background-color: chocolate;
}

普通にボタンを装飾するコードを書くだけです。

クリックしたボタンの色を変える

クリックしたボタンの色を変えるには下のコードを打ち込みます。

css

input[type="radio"]:checked + label {
  background-color: red;
}

こんな感じでおkです。htmlのinputに書いたラジオボタン要素がチェックされた時にbackgroundをredにするって感じです。

丸ポチを消す

最後に目障り(?)な丸ポチを消します。

css

input[type="radio"] {
  display: none;
}

と言ってもコレを書くだけです。

終わり

所詮僕のメモがわりなんで初歩的なとこしかかいてないですが　お役に立てば幸いです！

コード全部

HTML

<input type="radio" name="yesorno" id="yes" value="yes">
<label for="yes" class="btn">yes</label>
<input type="radio" name="yesorno" id="no" value="no">
<label for="no" class="btn">no</label>

css

.btn {
  background-color: #f08400;
  color: white;
  font-size: 18px;
  padding: 10px 20px;
}

.btn:hover {
  background-color: chocolate;
}

input[type="radio"]:checked + label {
  background-color: red;
}

input[type="radio"] {
  display: none;
}