CSS Rollover and HTML Forms

[Skint]

Hi,

Is it possible to have a CSS rollover button as the submit button of a HTML form?

I tried it but couldn't get it to work.

Thanks!

 

[Skint]

Is this not possible?

 

[pickledegg]

Try harder, it's possible with jQuery.

 

[Skint]

I just did it with inline JavaScript. I don't think you can do it with rollover (so the image loads before you hover over it). Still works though I guess...

 

[AmpedTyler]

Just use a standard <a> tag, style the button and add the rollover, throw it in the form and add onClick="this.form.submit();" to the tag.

Try onClick="$(this).closest('form').submit()" too, that one will require jquery though.

 

[MyOwnDemon]

I hope this is what you're asking...

#your_button
{
  display: block;
  width: Xpx;
  height: Ypx;
  background: url("link-to-your-button.jpg") no-repeat 0 0;
}

#your_button:hover
{ 
  background-position: 0 -Ypx;
}

#your_button span
{
  display: none;
}

<a id="your_button" href="#" title="#"><span>#</span></a>

 

[nickCR]

You can do it on a submit input as well...

GOOGLE: CSS Rollover INPUT SUBMIT

First result. CSS input boxes and submit buttons | CSS button

 

[dchuk]

if you do this in javascript 3 babies will die a day

 

[jest101]

Thank you!

 

[Skint]

Basically I have a button and and it links to a page on my site, it's a call-to-action button with a CSS rollover so it shines up when someone hovers over it.

That works.

But now I want to have a similar button (which I have the image for), to also have this rollover effect but I want it stuck on a form as the submit button.

But I don't think this is possible using an actual image... I did it with javascript but the button takes a little while to load, like maybe 3 seconds and it doesn't look very professional.

MyOwnDemon, I think that's what my button is like exactly, but that won't work in a HTML form.

AmpedTyler, that sounds good (probably because I haven't heard of it before haha) but does it work? I wouldn't know how to incorporate that into a standard HTML form, I don't know any PHP or anything; just the basics of HTML!

Thanks a lot for your time guys.

 

[melbahtoast]

Why not create the button in a div and style it with css to "look" like a button? You can use pseudo class hover to change the look of the entire div. Works in forms, loads fast, only downside is cross browser compatibility (if you have a gradient background, rounded corners and such it may not render well in ie, but no one cares about ie anyway).