How to change an input button image using CSS

Question

So, I can create an input button with an image using

<INPUT type="image" src="/images/Btn.PNG" value="">

But, I can't get the same behavior using CSS. For instance, I've tried

<INPUT type="image" class="myButton" value="">

where "myButton" is defined in the CSS file as

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.

I'm using Firefox 3.0.3 if that makes a difference.

ceejayoz · Accepted Answer · 2008-10-12 16:10:18Z

123

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

answered Oct 12, 2008 at 16:10

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

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

3 Comments

Baltimark Over a year ago

Thanks. Using "submit" instead of image got the image loaded.

eyelidlessness Over a year ago

Safari 3 and up allow you to style buttons however you want. And to be more compatible, use a <button> instead.

eglasius Over a year ago

re to be more compatible / <button> can buy you other compatibility issues.

Teocci · Accepted Answer · 2021-09-28 08:29:17Z

119

You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.

Like so:

<button type="submit" style="border: 0; background: transparent">
 <img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

More info

edited Sep 28, 2021 at 8:29

Teocci

9,4051 gold badge71 silver badges56 bronze badges

answered Oct 12, 2008 at 16:14

Dimitry

6,6332 gold badges24 silver badges21 bronze badges

3 Comments

scunliffe Over a year ago

Just remember that IE (5,6,7, & 8 (in non-standards mode) will submit the .innerHTML of the button, not the value attribute that you set on the button!

BJ Patel Over a year ago

But the border of the <button Remains inf Image is covered.

Cohen Over a year ago

@scunlife, Dimitry in additin posting the innerHtml causes for most webservers to not accept the posted data, since it smell's like an injection attack

Teocci · Accepted Answer · 2021-09-28 08:31:58Z

76

div.myButton input {
  background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: none;
}

<div class="myButton">
  <INPUT type="submit" name="" value="">
</div>

This will work anywhere, even in Safari.

edited Sep 28, 2021 at 8:31

Teocci

9,4051 gold badge71 silver badges56 bronze badges

answered Jul 28, 2009 at 10:54

SI Web Design

7855 silver badges3 bronze badges

Comments

splattne · Accepted Answer · 2008-10-12 16:12:31Z

25

This article about CSS image replacement for submit buttons could help.

"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.

And since button borders are erased, it's also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users."

The CSS code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

answered Oct 12, 2008 at 16:12

splattne

104k54 gold badges206 silver badges250 bronze badges

1 Comment

Scott Over a year ago

The problem with this method is that, if the client disables images in their browser, they don't see a button at all!

philoye · Accepted Answer · 2011-02-03 02:38:40Z

13

Here's a simpler solution but with no extra surrounding div:

<input type="submit" value="Submit">

The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

answered Feb 3, 2011 at 2:38

philoye

2,60028 silver badges23 bronze badges

4 Comments

Dylan Valade Over a year ago

I would click +2 if there was a button for this answer for the attribute CSS selector (type="submit") and recommendation for sprites

philoye Over a year ago

I don't control that site. Good thing I put the solution in my answer.

Bernhard Wagner Over a year ago

Last saved version of the link: web.archive.org/web/20140112085651/http://work.arounds.org/…

Peter Mortensen Over a year ago

The link is broken (404). Perhaps update your answer to reflect this fact? But without "Edit:", "Update:", or similar - the answer should appear as if it was written today.

Peter Mortensen · Accepted Answer · 2011-05-25 09:39:36Z

3

Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

edited May 25, 2011 at 9:39

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 11, 2011 at 16:09

user545376

311 bronze badge

Comments

Peter Mortensen · Accepted Answer · 2021-05-12 19:10:25Z

2

You can use blank.gif (a one-pixel transparent image) as the target in your tag:

<input type="image" src="img/blank.gif" class="button">

And then style background in CSS:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

edited May 12, 2021 at 19:10

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 1, 2011 at 17:56

dafyk

211 bronze badge

Comments

Peter Mortensen · Accepted Answer · 2021-05-12 19:16:45Z

2

A variation on the previous answers:

I found that opacity needs to be set, of course this will work in Internet Explorer 6 and on. There was a problem with the line-height solution in Internet Explorer 8 where the button would not respond. And with this you get a hand cursor as well!

<div id="myButton">
    <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
    background: url("form_send_button.gif") no-repeat;
    width: 62px;
    height: 24px;
}

#myInputButton {
    background: url("form_send_button.gif") no-repeat;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    width: 67px;
    height: 26px;
    cursor: pointer;
    cursor: hand;
}

edited May 12, 2021 at 19:16

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 15, 2011 at 20:59

Reed Richards

4,3988 gold badges46 silver badges55 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-05-12 19:37:14Z

2

I think the following is the best solution:

CSS:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

HTML:

<input class="edit-button" type="image" src="transparent.png" />

edited May 12, 2021 at 19:37

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 23, 2012 at 19:14

inf3rno

26.3k13 gold badges122 silver badges208 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2021-05-12 19:39:22Z

1

My solution without JavaScript and without images is this:

HTML:

<input type=Submit class=continue_shopping_2
       name=Register title="Confirm Your Data!"
       value="confirm your data">

CSS:

.continue_shopping_2: hover {
    background-color: #FF9933;
    text-decoration: none;
    color: #FFFFFF;
}


.continue_shopping_2 {
    padding: 0 0 3px 0;
    cursor: pointer;
    background-color: #EC5500;
    display: block;
    text-align: center;
    margin-top: 8px;
    width: 174px;
    height: 21px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #919191;
    font-family: Verdana;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    color: #FFFFFF;
}

edited May 12, 2021 at 19:39

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Nov 20, 2012 at 20:10

John

53915 silver badges22 bronze badges

Comments

Pythagorus · Accepted Answer · 2008-10-25 19:40:52Z

0

Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.

answered Oct 25, 2008 at 19:40

Pythagorus

1 Comment

Reed Richards Over a year ago

This is seriously over doing it.

Peter Mortensen · Accepted Answer · 2021-05-12 19:45:00Z

0

Let's assume you can't change the input type, or even the src. You only have CSS to play with.

If you know the height you want, and you have the URL of a background image you want to use instead, you're in luck.

Set the height to zero and padding-top to the height you want. That'll shove the original image out of sight, giving you a perfectly clean space to show your CSS background-image.

It works in Chrome. I don't have any idea if it works in Internet Explorer. Barely anything clever does, so probably not.

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">

edited May 12, 2021 at 19:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 11, 2020 at 12:19

Colin James Firth

1441 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to change an input button image using CSS

12 Answers 12

3 Comments

3 Comments

Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

3 Comments

3 Comments

Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Related