如何制作看起来不像按钮的Glyphicon按钮

Question

我正在为我的HTML/Javascript应用程序添加一些控件.当用户点击它们时,它们应该执行一个动作.虽然我可以将click事件绑定到任何元素,但从语义上讲,<button>元素似乎是正确的选择.它不仅表示一个应该被点击的元素,而且还提供了所需的默认行为(例如:cursor: pointer在CSS中); 我想避免重新设计.

但是,我希望我的控件看起来不像典型的按钮.具体来说,我想使用glyphicons(通过Bootstrap)来设置外观.

将glyphicon添加到按钮很简单:

<button type="button"><span class="glyphicon glyphicon-plus-sign"></span></button>

但这只是将glyphicon包装在标准按钮外观中:

(这是Chrome for OS X的屏幕截图)

我可以将glyphicon类直接附加到按钮:

<button type="button" class="glyphicon glyphicon-plus-sign"></button>

......但这看起来更糟糕了:

我确信我可以尝试剥离CSS中的各种边框,背景等,但这似乎不是非常跨平台或可靠的.

取消按钮按钮的最佳方法是什么？

Answer 1

这很容易做到.只需将以下CSS样式应用于您的button:

.icon-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<button class="icon-button"><span class="glyphicon glyphicon-plus-sign"></span></button>

而你的按钮应该看起来非常平淡.

JSFiddle在这里.