Buttons

by TiGR

HTML

<p>span/a buttons:</p>
<p><span class="buttons"><a 
    href="#something" class="button">Button 1</a><a 
    href="#something2" class="button">Button 2</a><a 
    href="#something3" class="button">Button 3</a></span></p>
<p>span/label/radio buttons:</p>
<p><span class="buttons"><label 
    class="button"><input type="radio" name="test" class="hider">Hide inputs</label><label 
    class="button"><input type="radio" name="test">Button 2</label><label 
    class="button"><input type="radio" name="test">Button 3</label></span></p>
<p>span/label/checkbox buttons:</p>
<p><span class="buttons"><label 
    class="button"><input type="checkbox" name="test2" class="hider">Hide inputs</label><label 
    class="button"><input type="checkbox" name="test2">Button 2</label><label 
    class="button"><input type="checkbox" name="test2">Button 3</label></span></p>
<p>span/label/checkbox single button:</p>
<p><span class="buttons single"><label 
    class="button"><input type="checkbox" name="test2">Button 1</label></span></p>

CSS

.buttons {
    word-wrap: normal; 
}
.buttons .button {
    margin: 0.5em;
    display: inline-block;
    width: 10em;
    text-align: right;
    margin-left: 0;
    font-weight: normal;
    cursor: pointer;
}
/* Кнопки-переключатели */
.buttons .button { 
    display: inline-block; zoom: 1; border: 1px solid #aaa;
    text-indent: 0; padding: 0.4em 1em; margin: 0; color: #777;
    text-decoration: none; outline: 0; width: auto;
    margin-left: -1px; border-left-color: transparent;
}
/* Первая кнопка в ряду */
.buttons .button:first-of-type  { 
    border-radius: 0.3em 0 0 0.3em;
    margin-left: 0; border-left-color: #aaa; }
/* Последняя кнопка */
.buttons .button:last-of-type   { 
    border-radius: 0 0.3em 0.3em 0; position: relative; 
}
.buttons.single .button {
    border-radius: 0.3em;
}
.buttons .button:hover {
    color: #55b; border-color: #55b; 
}
.buttons .button.selected {
    background-color: #77c; border-color: #55b;
    color: white; text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.5); 
}
.buttons .button input {
    cursor: pointer;
}
.buttons.hide-inputs .button input {
    position: absolute; opacity: 0; 
}

JavaScript

$(function() {
    $('.buttons .button input').change(function(e) {
        $(e.target).parents('.buttons').find('.button').removeClass('selected');
        $(e.target).parents('.buttons').find('.button :checked').parents('.button').addClass('selected');
    });
    $('.buttons .hider').click(function(e) {
        if ($(e.target).attr('checked')) {
            $(e.target).parents('.buttons').addClass('hide-inputs');
        } else {
            $(e.target).parents('.buttons').removeClass('hide-inputs');
        }
    });
});