17

I have two ways of creating circular buttons: http://codepen.io/anon/pen/GiHyJ They both seem equal, but I'm unsure which way is more stable, cross platform, usable, etc. I only have an android phone to test on, and both look good. Should I use one method over the other, and why?

Method one: <img> inside a <div>, allows user to get a context-menu on the img.

<div class="method1">
  <img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>

.method1 {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}

Method two: background: url on the <div>. Less markup.

<div class="method2"></div>

.method2 {
    background: url(http://i.imgur.com/TLFDrvp.jpg);
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
ruakh
  • 175,680
  • 26
  • 273
  • 307
000
  • 26,951
  • 10
  • 71
  • 101
  • 4
    I'd prefer the background version. In my opinion images should only be used to show, well, an image. Don't use images if you just need it for the layout/design. As I said: No real facts here, just my opinion. – Linus Caldwell Mar 27 '13 at 19:25
  • @LinusCaldwell: Conversely, one could argue that `background-image` should only be used for, well, backgrounds. Don't use backgrounds to supply foreground content. – ruakh Mar 27 '13 at 19:27
  • 2
    If you use a background image for the button and normal text for the link, the resultant page is more easily readable by technology-assisted browsing, such as for blind people. Also, by styling it with CSS, keeping the button and the text on the button separate, you make it easier to do future look-and-feel updates. – Wolfman Joe Mar 27 '13 at 19:28

1 Answers1

12

Use images for content and background-image for design elements. In your case, buttons are a part of your design and should be used background-image.

Andrei Surdu
  • 2,281
  • 3
  • 23
  • 32