You could achieve something pretty damn close to that JPG using nothing but CSS, it will be tricky though. Additionally, if the target audience is ONLY mobile users, then you don't have to worry about IE8 and below. Doing this in pure CSS would be impossible without CSS3 stuff that IE8 and below doesn't support.
So there is the CSS option... Then there could also be the SVG option. SVG's are vector graphics, meaning they scale infinitely without that nasty pixelating you see in raster graphics (like a jpg). SVG's can also be styled with CSS... Which means you could change the hover color, or the text color by modifying some CSS. The text then would just be overlayed on-top of the graphic. The vector graphic would allow you to scale the image up or down according to your orientation and screen size.
This is about as good as I could get with what I have to work with and limited time. Note that widths, heights, angles, etc can all be adjusted and your widths can be adjusted to be percentage based so they are more dynamic.
HTML:
<div class="container">
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
<div class="button">
</div>
</div>
CSS:
.container {
width: 500px;
}
.button {
position: relative;
width: 300px;
height: 40px;
margin: 10px auto 0 auto;
background: #b9aea2;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
}
.button:first-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
left: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-left: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(-5deg);
-moz-transform: skew(-5deg);
-o-transform: skew(-5deg);
background: #b9aea2;
}
.button:last-child:before {
content: ' ';
position: absolute;
z-index: -1;
width: 40px;
height: 0px;
top: 14px;
right: -20px;
margin: 0px 0px 0 0px;
border-top: 20px solid transparent;
border-right: 15px solid white;
border-bottom: 20px solid transparent;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
background: #b9aea2;
}
.button:after {
content: ' ';
position: absolute;
display: block;
width: 240px;
height: 10px;
bottom: -10px;
left: 30px;
-webkit-transform: skew(-80deg);
-moz-transform: skew(-80deg);
-o-transform: skew(-80deg);
background: #6b6562;
}
.button:last-child:after {
width: 0;
height: 0;
background: transparent;
}