- Egypt Web Design - http://www.egypt-webdesign.com -

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.

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 [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

Copyright © 2009 Egypt Web Design. All rights reserved.