How to customise button ( CSS, HTML) - html

Question

I want to make a button with a picture that will be shown inside and outside the button like this:
I don't want to use image for the button, because i will have to make at least 5 images.
Is there any way to do this with css?
I am using ASP.NET & C#
Thank you

Answer 1

UPDATED: You can use a pseudo element on the button tag. Make the button css position: relative then you could absolutely position pseudo element inside so that it pops out the top.
Then add left padding to the button so the text doesn't sit underneath the image.
http://jsfiddle.net/j1zLb8n9/1/
button {
position: relative;
padding: 1em 1em 1em 70px;
border: 1px solid #333;
background: #ccc;
}
button:before {
content: '';
position: absolute;
display: block;
background: url(http://placehold.it/60x90/3b3b3d) no-repeat;
bottom: 0;
left: 0;
height: 90px;
width: 60px;
}

Answer 2

I followed the advice of marmite and solved the problem. ASP's button probably does not like the :before so i included it in a div with css class bon and styled it properly to have the outcome that i wanted.
page.aspx
<div class="bon">
<asp:Button ID="AddToCartBTN" runat="server" CssClass="bot" Text="CART" OnClick="clik"/>
</div>
style.css
.bon {
position: relative;
padding: 6px 1em 1em 70px;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
display:block;
background-color: #91bd09;
height:30px;
z-index:100;
}
.bon:before {
content: '';
position: absolute;
display: block;
background: url(path_to_image) no-repeat;
bottom: 0;
left: 0;
height: 100px;
width: 100px;
z-index:999;
}
.bon:hover
{
background-color: #749a02;
}
.bot {
width:100%;
border:none;
background-color:transparent;
padding:5px 10px;
color: #fff;
font-size: 24px; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
cursor: pointer;
}
Doing so, i can use the asp's function without having to change the way it works.