【html/CSS】クリックしたら色が変わるボタンの作り方

「ボタンを押したことがちゃんとわかるようにしたい」

「どのボタンをクリックしたかわかるようにしたい」

クリックしたら色が変わるボタンの作り方を紹介します。

ボタンの色を変える基本はこちら↓

クリックしているときだけ色を変える

クリックしているときだけ色を変えるにはボタンのセレクタに疑似クラス「:active」をつけます。

下記のボタンを長押ししてみてください。押しているときだけ色が変わります。

ボタン

<style>
.example{
    display: block;
    width: 150px;
    background: #c8eac3;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
}
.example:active{
    background: #1a720d;
    color: #FFF;
}
</style>
<a href="#" class="example">ボタン</a>

aタグの場合押したらすぐ遷移するため色が変わるのは一瞬ですが、一応押したことを伝えることができます。

タブレットやスマホなどタップ操作の場合「:hover」でもほぼ同じ効果になります。

クリックしたら色が変わる（複数選択可）

クリックした後も色が変わらないようにするにはチェックボックスを使います。

<style>
.example2{
    display: flex;
}
.example2 label{
    display: block;
    width: 150px;
    background: #c8eac3;
    color: #000;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    cursor: pointer;
}
.example2 input:checked+label{
    background: #1a720d;
    color: #FFF;
}
.example2 input{
    display: none;
}
</style>
<div class="example2">
    <input type="checkbox" checked id="1" name="example2"><label for="1">ボタン</label>
    <input type="checkbox" id="2" name="example2"><label for="2">ボタン</label>
    <input type="checkbox" id="3" name="example2"><label for="3">ボタン</label>
</div>

チェックボックスはクリックすると「checked」というhtml属性がつきます。

これを利用してCSSだけでボタンの色を変化させることができます。

「checked」がついたinputを「input:checked」と指定することができます。

inputの弟要素としてlabelを置き、これをボタンにします。

あとは「input:checked+label」セレクタでクリックした後の色等を指定します。

クリックしたら色が変わる（単一選択）

他を選択したら色を戻すときはラジオボタンを使います。

html(CSSは同じ)

<div class="example2">
    <input type="radio" checked id="11" name="example3"><label for="11">ボタン</label>
    <input type="radio" id="12" name="example3"><label for="12">ボタン</label>
    <input type="radio" id="13" name="example3"><label for="13">ボタン</label>
</div>

先述のチェックボックスをラジオボタンに変えただけです。

クリックしたら色が変わる(上記以外)

ボタンがチェックボックスやラジオボタンじゃないときは、jQueryでクラスを付与し、そのクラスで色を変えましょう。

下記はクリックするたびに色が変わります。

ボタン

<script src="https://code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $(".example4").click(function() {
        $(this).toggleClass("click");
    });
});
</script>
<style>
.example4{
    display: block;
    width: 150px;
    background: #c8eac3;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
    cursor: pointer;
}
.example4.click{
    background: #1a720d;
    color: #FFF;
}
</style>
<a href="javascript:void(0)" class="example4">ボタン</a>

jqueryはクラスを付与しているだけです。

そのクラスが付いた後の色の変化はCSSで指定できます。

jqueryでクラスを付与する詳しい方法は下記記事をご覧ください。

なお、aタグhref属性の値を「javascript:void(0)」としていますが、これはクリックしても遷移しないようにしているだけで、クラス付与とは関係ありません。

【まとめ】クリックしたら色が変わるボタンの作り方

• クリックしているときだけ色を変える
  「:active」をつける
• クリックしたら色が変わる（複数選択可）
  チェックボックスを使う
• クリックしたら色が変わる（単一選択）
  ラジオボタンを使う
• クリックしたら色が変わる(上記以外)
  jQueryでクラスを付与する

以上、クリックしたら色が変わるボタンの作り方でした。