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

Question

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 click event to any element, semantically, a <button> 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:

(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:

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 1

This is easy to do. Just apply the following CSS styles to your 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>

And your button should be looking wonderfully bland.

JSFiddle Here.

Answer 2

Here's a simple way to do this without CSS

Use <span and use role="button"

Example:

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