CODEWITHSUNDEEP
css
Somnath Kayal
Somnath Kayal

Reputation: 393

Add image in a button

I try to make a button which text is "Buy Now!" but i want to display small image with this. Image in my images/Buy-icon. Please tell what wrong with it?
my CSS:

#submit
{       
  background-color: #ffb94b;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
  background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
  background-image: linear-gradient(top, #fddb6f, #ffb94b);

 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
  border-radius: 3px;

  text-shadow: 0 1px 0 rgba(255,255,255,0.5);

  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    

   border-width: 1px;
   border-style: solid;
   border-color: #d69e31 #e3a037 #d5982d #e3a037;

   float: left;
   height: 35px;
   padding: 0;
   width: 120px;
   cursor: pointer;
   font: bold 15px Arial, Helvetica;
   color: #8f5a0a;
}

#submit:hover,#submit:focus
{       
  background-color: #fddb6f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
  background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
  background-image: linear-gradient(top, #ffb94b, #fddb6f);
}   

#submit:active 
{       
outline: none;

 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        
}

#submit::-moz-focus-inner
{
 border: none;
}

#actions a
{
color: #3151A2;    
float: right;
line-height: 35px;
margin-left: 10px;
}

#submit.buy_icon
{
  background-image:url("../images/Buy-icon.png");
  float: left;
}

In my HTML:

<input type="submit" value="Buy Now!" id="submit" class="buy_icon"/>

But Buy Now button is successfully come only image is not come with it. What can I do? Please suggest.

Upvotes: 0

Views: 240

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

used to this #submit.buy_icon

as like this

  #submit.buy_icon
    {
    background-image:url("https://i.sstatic.net/nPfZp.jpg?s=32&g=1");
background-position:right 0;
    background-repeat:no-repeat;
height:32px;
border-width: 0;
    text-align:left;
    padding-left:10px;
    }

becuse you have define your css #submit css now id is more powerfull class than define

id and class in your css 

#submit.buy_icon

------------

Updated Demo

Upvotes: 2

grimmus
grimmus

Reputation: 513

The background you have defined for #submit is taking precedence over what you have defined for .buy_icon

Add !important after the background-image property in .buy_icon and it might help

Upvotes: 0

Darren
Darren

Reputation: 70728

Looks like you're missing quotes from the background-image and you need !important to ovveride the default behaviour:

.buy_icon
{
background-image:url('../images/Buy-icon.png')  !important;
width:32px;
height:32px;
border-width: 0;
background-color: transparent;
}

http://jsfiddle.net/Ph6Wt/

Upvotes: 2

Related Questions