Aタグではできない
まず前提としてAタグではできません(正確にはできないと言う訳でではなく探したらやり方があるのかもしれません)。そう言う訳なので、ラジオボタン要素を使います。
ラジオボタン要素の書き方
ラジオボタン要素の書き方の紹介です。
HTML
<inputtype="radio"name="yesorno"id="yes"value="yes"><labelfor="yes"class="btn">yes</label><inputtype="radio"name="yesorno"id="no"value="no"><labelfor="no"class="btn">no</label>ラジオボタンだけを追加するならこのコードだけで大丈夫です。labelのforのところにはinputのidに書いたものを入れてください。
(https://jsfiddle.net/このページでコードのチェックができます)
ラジオボタン要素の装飾
コレだけだとボタンっぽくないのでcssで装飾します。
css
.btn{background-color:#f08400;color:white;font-size:18px;padding:10px20px;}.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
<inputtype="radio"name="yesorno"id="yes"value="yes"><labelfor="yes"class="btn">yes</label><inputtype="radio"name="yesorno"id="no"value="no"><labelfor="no"class="btn">no</label>css
.btn{background-color:#f08400;color:white;font-size:18px;padding:10px20px;}.btn:hover{background-color:chocolate;}input[type="radio"]:checked+label{background-color:red;}input[type="radio"]{display:none;}