Button example

gistfile1.html

<a href="#" class="bg-btn">
        <img src="icon_and_text.png">
</a>

Then you can do this in css:

.bg-btn {
        background-image: url(img/redbg.png);/* grap a slice of the gridient here and have it repeat horizontally*/
        border-radius: 10px
        box-shadow: 0 0 0 10px 10px rgba(0,0,0,0.5);
}

.bg-btn:hover {
        background-image: url(img/redbg_hover.png);
}

And alternate approach would be to use the font for the buttons

with icon:
<a href="#" class="bg-btn">
        <span class="iconclass">Some text</span>    
</a>

.iconclass {
        padding-left: 50px:/*or however wide the icon is*/
        height: 50px;/*the height of the icon*/
        background-image: url(img/someicon.png);
        background-repeat: no-repeat;
        background-position: middle left;
}

Without icon:
<a href="#" class="bg-btn">
        <span>Some text</span>    
</a>

The latter approach means the buttons can be reused way easier, meaning less work for you. :)