10

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:

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?

Craig Walker
  • 49,871
  • 54
  • 152
  • 212
  • 2
    possible duplicate of [CSS remove default button style](http://stackoverflow.com/questions/16648627/css-remove-default-button-style) – Etheryte Nov 13 '14 at 19:45
  • 1
    Different question in that @Nit – Simply Craig Nov 13 '14 at 19:47
  • 1
    You could add the `btn-link` class and it removes the default button styling, but then I guess you need to override the colour and hover states. Maybe you could just use the CSS as a base for your own styles.. – cgwyllie Nov 13 '14 at 19:47
  • 1
    @SimplyCraig How is that a different question? – Derek Nov 13 '14 at 19:48
  • 1
    @DerekS because it is asking to get rid of the hover or select effect on the button not the default styling of the entire button. It is similar but not the same – Simply Craig Nov 13 '14 at 19:49
  • 1
    @DerekS the title sounds related, but the actual question is about removing the border that indicates the default button.. – Craig Walker Nov 13 '14 at 19:51
  • @cgwyllie: btn-link looks like a great solution. Add it as an answer, and I'll upvote it, and possibly accept it. – Craig Walker Nov 13 '14 at 19:57
  • @SimplyCraig The answer is exactly the same as the answers on the other question. – Etheryte Nov 13 '14 at 20:06
  • 1
    @Nit Actually no, it isn't its :focus not the button itself. – Simply Craig Nov 13 '14 at 20:10
  • @CraigWalker Hey, think it's unfair to post as an answer because it seems specific to the appearance you're looking for not the topic of removing 'default' button style from buttons, which I think the current answer handles more correctly. Thanks though! – cgwyllie Nov 13 '14 at 20:10
  • 1
    @Nit: I don't see how you can claim that. The every answer on that question is focused on the border/outline; only 2 mention any other property (background, shadow), and only then in passing. None of them mention `-webkit-appearance` or `btn-link` – Craig Walker Nov 13 '14 at 20:12
  • @cgwyllie: Ok, that's fine. As it happens, your solution is the one I'm going to implement for my situation. :-P Thanks! – Craig Walker Nov 13 '14 at 20:13
  • 1
    @CraigWalker Cool, glad to be of service haha :P – cgwyllie Nov 13 '14 at 20:17

2 Answers2

28

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.

Ian Hazzard
  • 7,661
  • 7
  • 34
  • 60
  • Just as a matter of practice, its probably better to create a new class that will add this look to buttons instead of overriding the bootstrap button globally. It would make more sense to use the style specified above (which works perfectly I might add) but call it something like `icon-button` or something like that. – KyleFarris Apr 10 '17 at 16:29
  • @KyleFarris, thanks, I'll update the answer to include this feedback. – Ian Hazzard Apr 11 '17 at 16:50
  • @Godisgood Thanks. If you look at the dimensions of the `button` element vs the `span.glyphicon` element, you see that the height of the button element is still different from the descendant `span.glyphicon`(`span` height is 14 while `button` height is 20), can you explain this? (here is the fiddle with padding set to 0: http://jsfiddle.net/fv4jxo4t/102/). – theyuv Oct 08 '18 at 09:54
1

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>
Jake Conway
  • 901
  • 16
  • 25
WPDRUPAL
  • 21
  • 2