HTML-код состояния кнопки

Question

Есть ли способ, чтобы кнопка HTML/bootstrap получила статус клика/unclicked? Я хочу, чтобы у вас была эстетическая кнопка с функциональностью флажка.

Answer 1

Это звучит как Вы уже используя Bootstrap. Если да, то использовать их button.js:

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> 
    Single toggle 
</button> 

Обратите внимание, что это использует aria-pressed (далее по MDN) ради ДОСТУПНОСТИ в.

Или с помощью checkboxes:

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 3 
    </label> 
</div> 

Answer 2

Просто создайте 2 класса CSS с разными стилями.

И затем измените CSS-класс на JavaScript/jQuery onClick Event.

EDIT: Вы можете использовать метод JQuery .toggleClass ->jsfiddle.net/g1akxxg6/1/

Answer 3

Да, есть способ. Вы можете сделать это с помощью чистого CSS, настраивая флажок с помощью labels и :after так:

HTML

<div class="button"> 
    <input type="checkbox" id="custom" /> 
    <label for="custom">Click Me</label> 
</div> 

CSS

input[type=checkbox] { 
    visibility: hidden; 
} 

.button { 
    position: relative; 
} 

.button label { 
    background: black; 
    color: #FFF; 
    cursor: pointer; 
    position: absolute; 
    left: 4px; 
    top: 4px; 
    text-align: center; 
    padding: 10px 20px; 
    width: 60px; 
    height: 20px; 
} 

.button label:after { 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    background: #00bf00; 
    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: linear-gradient(top, #00bf00 0%, #009400 100%); 
    top: 0px; 
    left: 0px; 
    padding: 10px 20px; 
    width: 60px; 
    height: 20px; 

} 

.button label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.5; 
} 

.button input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    content: 'ACTIVE'; 
} 

FIDDLE