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
#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;
}
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>
<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!
[...] Voir le Tutoriel [...]
I copied everything exactly and yet it won't work in any browser
@Robert: Could you please send the link of your final code may be i can help.
Thanks,
Mohammed Alaa
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
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
[...] Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] 4-Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]
[...] Style your Form Buttons with Only CSS and Zero Javascript [...]