myToggleBtn

by karin

HTML

<div class="btn-holder">
    <button autofocus class="btn-toggle">toggle 1</button>
    <button class="btn-toggle2">toggle 2</button>
</div>

CSS

/*BTN-TOGGLE*/
 .btn-toggle {
    float:left;
    position:relative;
    display: inline-block;
    margin-bottom: 0;
    margin-right:-10px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid #B8CDE3;
    color:#4f81bd;
    white-space: nowrap;
    padding:2px 30px 2px 10px;
    font-size:14px;
    line-height:1.5;
    -ms-border-radius: 4px;
    border-radius:2px 12px 12px 2px;
    background:#E8F2FC;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.btn-toggle:hover, .btn-toggle:focus {
    color: #333;
    background:#CFE4FC;
    text-decoration: none;
    border: 1px solid #CFCFCF;
    outline:0;
}
.btn-toggle.disabled, .btn-toggle.disabled:hover, .btn-toggle[disabled], .btn-toggle[disabled]:hover {
    cursor: default;
    border: 1px solid #CFCFCF;
}
.btn-toggle:active, .btn-toggle.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -ms-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
/*BTN-TOGGLE2*/
 .btn-toggle2 {
    float:left;
    position:relative;
    margin-left:-10px;
    display: inline-block;
    margin-bottom: 0;
    margin-right:0px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid #B8CDE3;
    color:#4f81bd;
    white-space: nowrap;
    padding:2px 10px 2px 30px;
    font-size:14px;
    line-height:1.5;
    -ms-border-radius: 4px;
    border-radius:12px 2px 2px 12px;
    background:#E8F2FC;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select:...

JavaScript

$(".btn-toggle").addClass('under');
$(".btn-toggle2").addClass('over');

$(".btn-holder button").on('click', function () {
    if ($("button").hasClass('over')) {
        $("button").toggleClass('over', 'under');
        $(this).attr("disabled", "disabled");
    }
});