input[type="button"], input[type="submit"], button CSS not behaving properly

Question

I'm trying to get this to work but there's still something not right.

I want to style the submit buttons with css to match the ones i already have.

<input type="submit" name="save_settings" value="Opslaan">

Style:

input[type="button"], input[type="submit"], button
{
   background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
   display: inline-block;
   line-height: 35px;
   padding:7px 0 15px 12px;
   margin:0;
   border:0;
   color: #FFFFFF;
   font-size: 15px;
   font-weight: bold;
   letter-spacing: -1px;
   text-shadow: 0 1px 1px #70A7E0;

}

jsFiddle

Could you be a bit more specific? What exactly is "not right"? — user1726343
– user1726343, Commented Dec 29, 2012 at 15:54
there's still something not right could you please what is not right? — palaѕн
– palaѕн, Commented Dec 29, 2012 at 15:54

Mark Steggles · Accepted Answer · 2012-12-29 14:24:12Z

4

You would be better off not using the background image and using css3 gradient instead. Something like:

input[type="button"], input[type="submit"], button
{

  background-color: #a3d4ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
  background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:    -moz-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:      -o-linear-gradient(top, #a3d4ff, #88bcf2);
  background-image:         linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
    display: inline-block;
    line-height: 22px;
    padding:7px 12px;
    margin:0;
    border: 1px solid #88bcf2; 
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 0 1px 1px #70A7E0;
    cursor:pointer;
}

answered Dec 29, 2012 at 14:24

Mark Steggles

5,5939 gold badges43 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Madara's Ghost Over a year ago

And why's that? Why should a gradient background-image would work, and not the image background-image?

Mark Steggles Over a year ago

because using an actual image for the background is not as flexible as a css gradient. If you wanted to changed the padding on the button you would have to update the image. Also an image is an extra http request.

Madara's Ghost Over a year ago

Perhaps, but is it an answer which solves the problem? I don't think it is. It may improve the situation, but it doesn't solve the specific problem at hand.

hunterloftis · Accepted Answer · 2012-12-29 16:09:58Z

2

input elements can't be styled completely.

Instead, use a button element.

button elements are much easier to style than input elements. You can add inner HTML content (think em, strong or even img), and make use of :after and :before pseudo-element to achieve complex rendering while input only accept a text value attribute.

source:

Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/HTML/Element/button

answered Dec 29, 2012 at 16:09

hunterloftis

13.8k5 gold badges51 silver badges53 bronze badges

Collectives™ on Stack Overflow

input[type="button"], input[type="submit"], button CSS not behaving properly

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related