How to customise button ( CSS, HTML)


Tags: html,css,button,styles

Problem :

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



Solution :

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.


    CSS Howto..

    How to make section be tall enough to store data (fullpage.js)?

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    How to check image is visible (Webdriver)

    How do I get a div to change the max-height upon window resize?

    How do I add a div under a right floated div?

    How to compile less css files using brunch

    How to call a jquery funcion with a css button?

    How can I add a consistent left margin to a checkbox label?

    How to center text from following element under an image

    how to “replace” css Properties with jQuery

    How to change css rules of external stylesheet [duplicate]

    On a web page how do I display a label that changes to a drop down box on hover

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    How to format HTML/CSS to align with single word in sentence?

    How to design multiple time clock wise rotation of a image in css

    How to make a div expand to right side of page and bottom of page [closed]

    How to make parent div above child div without position absolute?

    How to make smooth animation in css?

    How to cut divs both ways to keep the objects in center?

    How do you put two divs next to each other so they fill up the available space

    How to create a mobile navigation toggle using pure CSS?

    How to do page / content transitions

    How to change the colors of HTML form elements displayed in UIWebView?

    How to show hidden div in the same line as the paragraph text?

    How to make image thumbnail look like video with CSS

    How to create a simple social sharing dropdown menu in CSS/HTML

    Google Apps Script How to link to JS or CSS file on Google Drive

    How to make the float left and float right on the same line?

    How to call CSS from JavaScript