如何制作外观不像按钮的Glyphicon按钮

Question

如何制作外观不像按钮的Glyphicon按钮

10

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

然而，我希望我的控件看起来不像典型的按钮。具体来说，我想使用图标字体（通过Bootstrap）来设置外观。

向按钮添加图标字体很简单：

<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去除各种边框、背景等，但那似乎不太跨平台或可靠。

最好的去除按钮化效果的方法是什么？

- Craig Walker

2

可能是CSS去除默认按钮样式的重复问题。 - Etheryte

1

你可以添加 btn-link 类来移除默认的按钮样式，但是这样你可能需要覆盖颜色和悬停状态。也许你可以将 CSS 作为自己样式的基础。 - cgwyllie

1

@DerekS 因为它要求消除按钮的悬停或选择效果，而不是整个按钮的默认样式。这很相似，但并不完全相同。 - Simply Craig

1

@Nit 实际上不是按钮本身，而是:focus。 - Simply Craig

1

@Nit：我不明白你怎么能这样说。那个问题的每一个答案都集中在边框/轮廓上；只有2个提到了其他属性（背景、阴影），而且只是顺便一提。其中没有一个提到-webkit-appearance或btn-link。 - Craig Walker

显示剩余8条评论

2个回答

1

这里有一种没有使用CSS的简单方法

使用并使用role="button"

例如:

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

- WPDRUPAL

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drazzah · Accepted Answer

这很容易实现。只需要将以下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>

而你的按钮应该看起来非常朴素。

如何制作外观不像按钮的Glyphicon按钮

这里是JSFiddle。