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

Question

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

但是，我希望我的控件不像典型的按钮那样看起来像。具体来说，我想使用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 Here

Answer 2

这是一种在没有CSS的情况下执行此操作的简单方法

使用<span并使用role="button"

示例：

<span class="glyphicon glyphicon-camera" data-toggle="modal" role="button" aria-hidden="true"></span>