Craig Walker Craig Walker - 1 year ago 58
CSS Question

How do I make Glyphicon buttons that don't look like buttons

I'm adding some controls to my HTML/Javascript application. When the user clicks on them, they're supposed to perform an action. While I could bind the

event to any element, semantically, a
element seems like the right choice. Not only does it indicate an element that's supposed to be clicked, but it also gives default behaviour (ex:
cursor: pointer
in CSS) that is desirable; I'd like to avoid re-engineering that.

However, I want my controls to not look like typical buttons. Specifically, I want to use glyphicons (via Bootstrap) to set the appearance.

Adding a glyphicon to a button is simple enough:

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

But that just wraps the glyphicon in a standard button appearance:

an icon embedded in a button

(This a screen capture from Chrome for OS X)

I can attach the glyphicon classes directly to the button:

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

...but that just looks worse:

a button with icon classes

I'm sure I could try stripping away the various borders, backgrounds, etc in CSS, but that doesn't seem very cross-platform or reliable.

What's the best way to de-buttonize a button?

Answer Source

This is easy to do. Just apply the following CSS styles to your button:

button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border: 0;
    background: transparent;
<link href="" rel="stylesheet"/>
<button><span class="glyphicon glyphicon-plus-sign"></span></button>

And your button should be looking wonderfully bland.

JSFiddle Here.