Dan Olsavsky's Blog

Tuesday, October 16, 2007

CSS Roll-Over Submit Buttons

The CSS.
Note: These are the styles for an image-roll over . You can just as easily use background colors.

#contact input.submit {
background: url(../images/qc-submit-btn.jpg) 0px 0px;
height: 53px;
width: 144px;
display: block;
border: none;
}
#contact :hover input.submit {
background-position: -144px 0px;
}
#contact:active input.submit {
background-position: -288px 0px;
}

The HTML.

<a onclick="document.getelementbyid('formid').submit"><input type="submit" class="submit" name="" value="" /></a>

-Dan Olsavsky

posted by dano at 10:12 AM

1 Comments:

Blogger Andrew said...

Hey bud, in a site I'm currently working on I managed to figure out a great way to do submit buttons.

Use a <button> element (be sure to include some good reset styles as this element is rendered weirdly in different browsers), then place whatever you want on the inside.

For the current project I'm working on I used a <span> since I wanted be sure a disabled style would work. I then used jQuery to work out the interaction, on button hover toggle the hover class for the span, if button has attribute of disabled, then add disabled class to span, that way you have already 3 states set, you can of course go further if you want, but static, rollover and disabled were the key three for me.

Cheers!

February 26, 2009 10:40 AM  

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.