Style your Form Buttons with Only CSS and Zero Javascript
Posted By Egypt Web Design On May 29, 2008 @ 2:19 AM In CSS Techniques | 16 Comments
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.
CSS Used
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
<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 [1] And here you can download the tutorial files Download Now! [2]
Article printed from Egypt Web Design: http://www.egypt-webdesign.com
URL to article: http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm
URLs in this post:
[1] Preview: http://www.egypt-webdesign.com/wp-content/examples/style-button/index.htm
[2] Download Now!: http://www.egypt-webdesign.com/wp-content/uploads/2008/05/stylingbutton.rar
[3] I Love Social Bookmarking: #
[4] Subscribe: http://www.egypt-webdesign.com/feed
[5] Digg: http://digg.com/submit?phase=2&url=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm&title=Style+your+Form+Buttons+with+Only+CSS+and+Zero+Javascript
[6] del.icio.us: http://del.icio.us/post?url=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm&title=Style+your+Form+Buttons+with+Only+CSS+and+Zero+Javascript
[7] Facebook: http://www.facebook.com/share.php?u=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm
[8] Reddit: http://reddit.com/submit?url=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm&title=Style+your+Form+Buttons+with+Only+CSS+and+Zero+Javascript
[9] StumbleUpon: http://www.stumbleupon.com/submit?url=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm&title=Style+your+Form+Buttons+with+Only+CSS+and+Zero+Javascript
[10] Technorati: http://technorati.com/faves?add=http://www.egypt-webdesign.com/css-techniques/style-your-form-buttons-with-only-css-and-zero-javascript.htm
Click here to print.