Pure CSS3 Toggle Button

by Сергей Тарасевич

HTML

<div class="aaa">
    <div class="bbb" data-r="1">&#10004;</div>
    <div class="ccc" data-r="2">&#10006;</div>
</div>
<div class="aaa">
    <div class="bbb" data-r="1">&#9632;</div>
    <div class="ccc" data-r="2">&#9654;</div>
</div>
<div class="aaa">
    <div class="bbb" data-r="1">Stop</div>
    <div class="ccc" data-r="2">Play</div>
</div>

CSS

body {
    background-color:#eee;
    text-align:center;
    padding:85px 0;
}
.aaa {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 60px;
    background-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    vertical-align: top;
}
.aaa .bbb {
    width: 48px;
    height: 50%;
    display: block;
    margin: 1px;
    position: relative;
    background-image: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
    background-image: -ms-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
    background-image: linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font: normal 11px Arial, Sans-Serif;
    line-height: 30px;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    cursor: text;
}
.aaa .ccc {
width: 48px;
height: 50%;
display: block;
margin: -1px 1px 1px;
position: relative;
background-image: -webkit-linear-gradient(#fff 0%, #eee 100%);
background-image: -moz-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
background-image: -ms-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
background-image: -o-linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
background-image: linear-gradient(top, #fff 0%, #ddd 50%, #fff 50%, #eee 100%);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white;
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 1px #888, inset 0 -5px 1px #bbb, inset 0 -6px 0 white;
-webkit-border-radius: 3px;
-moz-border-radius:...

JavaScript

$(document).on('click', '.aaa div', function () {
    var a = $(this).data('r');
    alert(a);
});