athskar athskar - 5 months ago 13
CSS Question

How to customise button ( CSS, HTML)

I want to make a button with a picture that will be shown inside and outside the button like this:
image button

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

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.