CSSでクリックされた時（クリック中）に変化する要素を作る方法

CSSでは、マウスオンされたときに文字の色を変えたり、色々な変化をhoverで制御するのが常套手段として使われていますが、activeプロパティを使うことで、クリック中の変化を与えることが出来ます

activeを使ってクリック感を出す

DEMOで幾つかアクションを加えた時の動作を作ってみましたので試してください

DEMO 表示

使い方は至って簡単です
hoverを使っていたようにactiveを使うだけなのです

CSS コード

.click:active {変化を与える}

使い方はたったのこれだけです

DEMOページの4目の例のコードではこの様になっています

CSS コード

.click {
    background: green;
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: #fff;
    margin: 30px auto;
    border-radius: 50%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.click:active {
    -webkit-box-shadow:
    0 0 0 15px #fff,
    0 0 0 18px green;
    -moz-box-shadow:
        0 0 0 15px #fff,
    0 0 0 18px green;
    box-shadow:
        0 0 0 15px #fff,
    0 0 0 18px green;
}

HTMLコード