0

When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.

My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?

For example... I have the following HTML for my button

<input type="image" id="login_submit" name="login_submit" src="button_login.png" />

and seperate to this I have the following CSS that I used before...

#login_submit a {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
   background-position: -141px 0;
}
#login_submit a:active {
   background-position: -282px 0;
}

now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.

or should I stick with having 2/3 separate buttons for each state?

2 Answers 2

1

Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:

#login_submit {
   outline: none;
   text-indent: -5000px;
   display:block;
   margin-left: auto;
   margin-right: auto;
   width: 141px;
   height: 36px;
   background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
   background-position: -141px 0;
}
#login_submit:focus {
   background-position: -282px 0;
}

Good luck, Leo

4
  • I think this should work, but the src attribute may need to be removed from the input element.
    – Jon P
    May 29, 2012 at 1:58
  • Totally right, it needs to be an input type of button or type submit or a button tag
    – leopic
    May 29, 2012 at 2:48
  • I've got one slight problem though :( The user agent stylesheet seems to put in some crummy extras such as a border and such... I really don't want to go through each of the attributes and change them individually to cancel them out, got any idea on what I should do off the top of your head?
    – svict4
    May 29, 2012 at 3:52
  • 1
    Sadly no, buttons are kind of pain to get consistent styles without a lot resetting, you can always try with appareance developer.mozilla.org/en/CSS/-moz-appearance but that won't work in IE, sorry mate.
    – leopic
    May 29, 2012 at 4:02
0

I had this problem too, but just solved it.

By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.

=)

Code is taken directly from my situation:

HTML:

<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>

CSS:

#send
{
    height: 25px;
    width: 107px;
    overflow: hidden;
    display: block;
    float: right ;
    background: url('../images/style/button-send.png');
}


#send:hover
{
    background-position: 0 -25px;
}

I hope this helps. =)

By the way, for me this approach took care of the problems mentioned by svict4 as well. =)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.