良好的语义方式是使用复选框，然后如果未选中，则以不同的方式设置其样式。但是没有好的方法可以做到这一点。您必须添加额外的跨度，额外的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>显然，您可以添加代表按钮上移和按钮下移的背景图像，并使背景色透明。
