CSS Buttons Image - Try it Live

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin:5px;
}

button {
  cursor:pointer;
}
.img-container {
  display:inline-block;
  position:relative;
}
.btn-bottom-left {
  position:absolute;
  bottom:0;
  left:0;
  border-radius:5px;
  background:orange;
}
.btn-bottom-right {
  position:absolute;
  bottom:0;
  right:0;
  border-radius:5px;
  background:orange;
}
.btn-top-left {
  position:absolute;
  top:0;
  left:0;
  border-radius:5px;
  background:orange;
}
.btn-top-right {
  position:absolute;
  top:0;
  right:0;
  border-radius:5px;
  background:orange;
}
.btn-center {
  position:absolute;
  right:50%;
  top:50%;
  border-radius:5px;
  background:orange;
}
</style>
</head>
 <body>
 <h3>Buttons using display, position, top, right, bottom and left</h3>
 <div class="img-container">
    <img src="img/css_buttons_image.png"
      height="200px" width="200px" border="2px solid">
    <input type="button" class="btn-bottom-left" value="Bottom-left" />
    <input type="button" class="btn-bottom-right" value="Bottom-right" />
    <input type="button" class="btn-top-left" value="top-left"/>
    <input type="button" class="btn-top-right" value="top-right"/>
    <input type="button" class="btn-center" value="Center" />
</div>
<br>

<h3>Buttons using image inside button</h3>
<button type="button"><img src="img/css_buttons_image.png" alt="Kids playing footbal" height="100px" width="200px"></button>
 </body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin:5px;
}
​
button {
  cursor:pointer;
}
.img-container {
  display:inline-block;
  position:relative;
}
.btn-bottom-left {
  position:absolute;
  bottom:0;
  left:0;
  border-radius:5px;
  background:orange;
}
.btn-bottom-right {
  position:absolute;
  bottom:0;
  right:0;
  border-radius:5px;
  background:orange;
}
.btn-top-left {
  position:absolute;
  top:0;
  left:0;
  border-radius:5px;
  background:orange;
}
.btn-top-right {
  position:absolute;
  top:0;
  right:0;
  border-radius:5px;
  background:orange;
}
.btn-center {
  position:absolute;
  right:50%;
  top:50%;
  border-radius:5px;
  background:orange;
}
</style>
</head>
 <body>
 <h3>Buttons using display, position, top, right, bottom and left</h3>
 <div class="img-container">
    <img src="img/css_buttons_image.png"
      height="200px" width="200px" border="2px solid">
    <input type="button" class="btn-bottom-left" value="Bottom-left" />
    <input type="button" class="btn-bottom-right" value="Bottom-right" />
    <input type="button" class="btn-top-left" value="top-left"/>
    <input type="button" class="btn-top-right" value="top-right"/>
    <input type="button" class="btn-center" value="Center" />
</div>
<br>
​
<h3>Buttons using image inside button</h3>
<button type="button"><img src="img/css_buttons_image.png" alt="Kids playing footbal" height="100px" width="200px"></button>
 </body>
</html>
​