How to make Glyphicon buttons that don't look like buttons

Question

I am adding some controls to my HTML / Javascript application. When the user clicks on them, they must perform an action. Although I could bind the click event to any element, semantically, the <button> element seems to be the right choice. It not only indicates the element to be clicked, but also gives the default behavior (ex: cursor: pointer in CSS), which is desirable; I would like to avoid re-development.

However, I want my controls to not look like regular buttons. In particular, I want to use glyphics (via Bootstrap) to set the look.

Adding a glyphicon to a button is quite simple:

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

But it just wraps the glyphicon in the standard button look:

(This is a screen capture from Chrome for OS X)

I can attach glyphicon classes directly to the button:

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

... but it looks worse:

I am sure that I could try to remove various borders, backgrounds, etc. in CSS, but that doesn't seem very cross-platform or robust.

What is the best way to deactivate a button?

Answer 1

It 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 look wonderfully soft.

JSFiddle Here .

Answer 2

Here is an easy 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>