By hollybeary on

Ok, I'm having some trouble figuring this one out. Does anyone know how, or know of a good tutorial for how to use css to change the look and feel of the normal gray form submit buttons? I'm using the webform module. I need to replace the standard submit button with an image, and it also needs to have a rollover or hover effect. If I was just coding a standard static html page this would be so simple, but I'm not sure how to go about doing this the drupal way. Any suggestions? Thanks!

⋅ Categories: Drupal 6.x

Comments

hollybeary’s picture

hollybeary commented

Ok, after some hunting around I've got half my problem answered. Using some styling magic:

#primarycontent .form-submit {
	width:84px;
	height:30px;
	background:url(images/submit1.jpg) no-repeat;
  border:none;
  padding-top: 40px;
  overflow: hidden;
}

I was able to change the button to an image, now all I need is a good way to get the image to change on a mouse hover. Thoughts anyone?

hollybeary’s picture

hollybeary commented

Final Solution, just add :hover

#primarycontent .form-submit:hover {
        width:84px;
        height:30px;
        background:url(images/submit2.jpg) no-repeat;
        border:none;
        padding-top: 40px;
        overflow: hidden;
 }

Turned out to be much easier than I thought! Hope this helps someone else down the road!

saltas.alus’s picture

saltas.alus commented

oh yes, it does helps :)

bradleygsmith’s picture

bradleygsmith commented

This is the solution I have been looking for. This absolutely works. I use css all the time, but before I saw this post, I had no idea that you could style your submit button with css. Thanks for the post.

Oh, and just a quick note. I use the webform module on my forms. For the submit button text, I had to enter spaces so that no text was sitting on top of my submit image. If you leave the normal, default value of your submit button alone (a blank value equates to the text 'Submit' for your button) or if you have entered alternate text for your submit button, the text will be sitting on top of your image--so spaces for this value work instead of text. These spaces assure you that you have no text ('Submit' or otherwise) covering your image.

beatnikdude’s picture

beatnikdude commented

~thanks

'(Òvó)

baaj’s picture

baaj commented

Much thanks!