CSS Techniques

Style your Form Buttons with Only CSS and Zero Javascript

hey welcome to my blog I’m happy you are here to check my CSS techniques today i will show you how to style submit button without any JavaScript and how to make rollover effect! can you believe it ZERO JavaScript and tested on all browsers.

styleforms Style your Form Buttons with Only CSS and Zero Javascript

CSS Used

#button {
display: block;
width: 175px;
height: 45px;
margin: 0px auto;
}
#button input:hover{
background-image:url('images/clicktosend_hover.gif');
background-position:left top;
background-repeat:no-repeat;
}

HTML

<div id="button">
<input name="Button1" type="image" value="button" src="images/clicktosend.gif" alt="Click to Send" width="175" height="45" />
</div>

Here you can See a Preview And here you can download the tutorial files Download Now!

Discussion

16 comments for “Style your Form Buttons with Only CSS and Zero Javascript”

  1. [...] Voir le Tutoriel [...]

    Posted by 22 tutoriels pour boutons CSS | WebCssDesign | November 9, 2009, 1:37 AM
  2. I copied everything exactly and yet it won't work in any browser

    Posted by Robert | November 20, 2009, 5:56 PM
  3. @Robert: Could you please send the link of your final code may be i can help.

    Thanks,
    Mohammed Alaa

    Posted by MohammedAlaa | November 20, 2009, 6:18 PM
    • Hi Mohammed,

      After trying to place your code within my HTML with no luck I finally uploaded your exact code to my website server, created two .GIF files with the same names as your files and uploaded those as well to my "images" directory. I still can't get it to work. Here is the URL where you can take a look at the code which is your code unchanged http://motorsites.com/test-works.htm

      Thank You So Much! Robert Quinn

      Posted by Robert quinn | November 20, 2009, 7:57 PM
      • Dear Robert,

        Now i see what you mean actually the code is working fine but here is what's happening. this demo is to show highlights around the button (using an image).

        if you need to change the color of the button when hover then you can do it normal using CSS as follow:
        <pre>.submitbtn:hover{background-color:black;}</pre>

        if you need to change the background color on hover then i'd suggest doing the following steps:
        1- create the image of the button background & the hover effect in 1 image (on top the normal and on bottom the hover one)
        2- in the CSS do the following:
        <pre>
        .submitbtn{background url('image_url/buttonimage.jpg') no-repeat scroll center top;}
        ..submitbtn:hover{background-position:center bottom ! Important;}
        </pre>

        let me know if you need anything :)

        Mohammed

        Posted by MohammedAlaa | November 20, 2009, 11:29 PM
  4. [...] Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine | December 17, 2009, 1:13 AM
  5. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element : Speckyboy Design Magazine | December 30, 2009, 6:30 PM
  6. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element · rogdykker | December 30, 2009, 6:43 PM
  7. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element | Programming Blog | December 30, 2009, 10:35 PM
  8. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element | EMDMA | December 31, 2009, 1:34 AM
  9. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element | iDESIGN | January 9, 2010, 5:14 AM
  10. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the button element | Bizimhost.biz | January 9, 2010, 7:20 AM
  11. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 15 Tips and Techniques for Styling the Button Element « Extreme Design Studio Blog v4.0 | January 29, 2010, 10:52 PM
  12. [...] 4-Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 26 Essential Submit Button Enhancements | tripwire magazine | March 3, 2010, 9:49 PM
  13. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 35+ Essential Submit Button Enhancements | tripwire magazine | March 3, 2010, 11:26 PM
  14. [...] Style your Form Buttons with Only CSS and Zero Javascript [...]

    Posted by 35+ Essential Submit Button Enhancements - Programming Blog | March 4, 2010, 9:55 AM

Post a comment

You must be logged in to post a comment.