HTML 按钮点击状态

Question

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

Answer 1

是的，有办法。您可以通过使用 labels 和 :after 自定义复选框来使用纯 CSS 来完成此操作，如下所示:

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