Skip navigation
cp805
cp805 Calculating status...
Currently Being Moderated

Coding a button with 3 instances

Jul 11, 2012 11:49 PM

I have 3 images: 1.png, 2.png, and 3.png.

 

Image 1.png is my "UP" state for my button. (the image for the button at normal with no activity)

 

Image 2.png is my "OVER" state for my button. (when my mouse is hovering over the image)

 

and

 

Image 3.png is my "ACTIVE" state. (when the mouse is clicking down on the image)

 

What is the HTML and CSS coding to do this? I am using <div> 's.

 

Thank you for your time.

 

cp

441 Views   2 Replies   Latest reply: Nancy O., Jul 13, 2012 1:11 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jul 12, 2012 12:15 AM   in reply to cp805
    Report

    Because you have not supplied enough detail, I am assuming that you want to use the buttons for a menu system. In that case you could do the following

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {
    background: red;
}
a:hover {
    background: yellow;
}
a.active {
    color: white;
    background: black;
}
</style>
</head>

<body>
<a href="index.html" class="active">Home</a>
<a href="about.html">About Us</a>
<a href="products.html">Products</a>
<a href="contact.html">Contact Us</a>
</body>
</html>

     

    You can place your images as the background value

     

    Gramps

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Jul 13, 2012 1:11 PM   in reply to cp805
    Report

    Try this tutorial:

    http://alt-web.com/DEMOS/CSS-Button-Sprite.shtml

     

     

    Nancy O.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points