HTML 按钮点击状态

Question

有没有办法给 HTML/bootstrap 按钮一个 clicked/unclicked 状态？我希望能够拥有具有复选框功能的按钮的美感。

Answer 1

只需创建 2 个 CSS Class 具有不同样式的元素。

然后更改 CSS-Class on JavaScript/jQuery onClick 事件。

编辑：您可以使用 JQuery 方法 .toggleClass -> jsfiddle.net/g1akxxg6/1/

Answer 2

是的，有办法。您可以使用 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

Answer 3

听起来您已经在使用 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>

HTML 按钮点击状态

HTML button click status

html

css

twitter-bootstrap