505 posts
  • United States
  • Beta Tester
  • Won a Competition
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 100 and 1 000 dollars
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
CraigSnedeker says

http://snedekerdesignz.com/

Those two buttons are 100% css. The html is as follows:

<div id=”button1”> <a class=”1” href=”http://snedekerdesignz.webs.com/”</a> </div>

And the CSS :

#button1 a { background:#128BC8 url(image2.png) repeat-x scroll 0 0; border:7px solid black; display:block; float:left; height:128px; margin-left:150px; width:198px; }

Feel free to use this code yourself.

136 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Italy
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Raspo says

?

What’s the point?

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says
repeat-x

Is not necessary.-

505 posts
  • United States
  • Beta Tester
  • Won a Competition
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 100 and 1 000 dollars
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
CraigSnedeker says

I know added that incase

The point is you don’t need lots of javascript files to make roll over images. CSS owns

1148 posts
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • Has been a member for 4-5 years
  • Bought between 10 and 49 items
  • Exclusive Author
  • Envato Studio (Microlancer) Beta Tester
  • United States
fillerspace says

You also need an a:hover to make it work

101 posts
  • Canada
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
LoewenWeb says

To be user friendly either use sprites with background position (to avoid the image loading delay on hover) or preload the rollovers with JavaScript.

962 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Ireland
  • Sold between 10 000 and 50 000 dollars
EireStudio says

You’re using redundant divs

53 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • New Zealand
  • Referred between 1 and 9 users
  • Sold between 50 000 and 100 000 dollars
templateup says

Why can’t you just preload with css? loading the images at the top of the page with display none.

162 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 50 000 and 100 000 dollars
+1 more
ponjoh says
Why can’t you just preload with css? loading the images at the top of the page with display none.

Internet Explorer does not cache images loaded with CSS .

snedekerdesignz: Why the div? Divitis is a nasty disease :p

2441 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

CSS Sprites would be much better ;)

by
by
by
by
by
by