WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Rollover Button Using CSS on Thu Feb 25, 2010 12:11 am

Sanket

avatar
Administrator
Administrator
Rollover button Using CSS
How to have a roll over effect on a image

Hello Everyone Very Happy

This is a tutorial to have a rollover effect over a button. You must have seen different kinds of roll over's wherein the image is loaded once we hover over it. Making it look like a intermittent rollover for the first time. But this method avoids that because the image is already loaded when the page loads.

To start off with we will require an image of this sort.
The image is of size 100 x 40 (px)
We have created this image in such a way that, top half that is 20 px is the base image which we want to be always visible & the bottom half of 20 px to be displayed when we roll over it.

Enter this code into your HTML Page.

Code:
<head>
  <style>
#xyz{
  display: block;
  width: 100px;
  height: 20px;
  background: url("http://i49.tinypic.com/2ckcph.png") no-repeat 0 0;
}
#xyz:hover
{  background-position: 0 -20px;
}
</style>
</head>
<body>
<div align="center"><a id="xyz" href="http://www.webartzforum.com" title="Roll Over"></a></div>
</body>
</html>
Its really a self explanatory code, wherein we have the top half of it displayed & when we hover over it, it takes the bottom part making it look like a rollover effect.


Thank you Smile

Notice : This version of the tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.webartzforum.com

2Accespted Re: Rollover Button Using CSS on Thu Feb 25, 2010 7:44 am

Cody


Registered Member
Registered Member
AWESOME! I've always wanted to know how to do it. It came on a template of mine. (Well, its actually my homepage XD) but I neva knew how to do it.

http://socialforever.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum