如何创建切换按钮？

Question

我想使用CSS在html中创建一个切换按钮。我想要它，以便当您单击它时，它保持推入状态，而不是再次单击时它弹出。

如果没有办法仅使用CSS。有没有办法使用jQuery？

Answer 1

良好的语义方式是使用复选框，然后如果未选中，则以不同的方式设置其样式。但是没有好的方法可以做到这一点。您必须添加额外的跨度，额外的div，并且要真正看起来不错，请添加一些javascript。

因此最好的解决方案是使用一个小的jQuery函数和两个背景图像来样式化按钮的两种不同状态。由边框给出上下效果的示例：

$(document).ready(function() {

  $('a#button').click(function() {

    $(this).toggleClass("down");

  });

});


a {

  background: #ccc;

  cursor: pointer;

  border-top: solid 2px #eaeaea;

  border-left: solid 2px #eaeaea;

  border-bottom: solid 2px #777;

  border-right: solid 2px #777;

  padding: 5px 5px;

}



a.down {

  background: #bbb;

  border-top: solid 2px #777;

  border-left: solid 2px #777;

  border-bottom: solid 2px #eaeaea;

  border-right: solid 2px #eaeaea;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="button" title="button">Press Me</a>

显然，您可以添加代表按钮上移和按钮下移的背景图像，并使背景色透明。