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.
This question is related to
css
input-button-image
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
You can use blank.gif (1px transparent image) as 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;}
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
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="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>
My solution without js 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;}
HTML
<div class="myButton"><INPUT type="submit" name="" value=""></div>
CSS
div.myButton input {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
This will work anywhere, even in Safari.
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="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
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;
}
A variation on the previous answers. I found that opacity needs to be set, of course this will work in IE6 and on. There was a problem with the line-height solution in IE8 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;
}
You can use blank.gif (1px transparent image) as 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;}
My solution without js 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;}
HTML
<div class="myButton"><INPUT type="submit" name="" value=""></div>
CSS
div.myButton input {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
This will work anywhere, even in Safari.
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.
Works in Chrome. No idea if it works in IE. Barely anything clever does, so probably not.
#daft {_x000D_
height: 0;_x000D_
padding-top: 100px;_x000D_
width: 100px;_x000D_
background-image: url(clever.jpg);_x000D_
}<input type="image" src="daft.jpg" id="daft">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/
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;
}
A variation on the previous answers. I found that opacity needs to be set, of course this will work in IE6 and on. There was a problem with the line-height solution in IE8 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;
}
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;
}
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" />
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.
Works in Chrome. No idea if it works in IE. Barely anything clever does, so probably not.
#daft {_x000D_
height: 0;_x000D_
padding-top: 100px;_x000D_
width: 100px;_x000D_
background-image: url(clever.jpg);_x000D_
}<input type="image" src="daft.jpg" id="daft">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;
}
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="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>
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" />
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;
}
Perhaps you could just import a .js file as well and have the image replacement there, in JavaScript.
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;
}
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/
Source: Stackoverflow.com