Monday, November 29, 2010

Create Rollover Image in CSS

I made two buttons for this tutorial, save it if you want to work with them.

Open Notepad and type the next code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(;
background-repeat: no-repeat;
width: 400px;
height: 400px;
a.w3school:hover {
background-image: url(;

<p style="text-align:center"><a class="w3school" href="">Create Rollover Image in CSS</a> </p>

2.Click on File > Save as and save like HTML

This results in

No comments:

Post a Comment