CODEWITHSUNDEEP
htmlcss
5416339
5416339

Reputation: 417

How to make hover buttons?

I want to make a CSS class so that i can use it like this

<input type="button" class="hoverbuttons">

So how do I make a class so that my button will hover?

I have two buttons already. Assuming those URLs to be URL1 and URL2 how can I make them hover-able using CSS?

Upvotes: 2

Views: 14350

Answers (5)

whostolemyhat
whostolemyhat

Reputation: 3123

The easiest way is to use sprites. You'll need to change the <input> tags to <a> tags:

<style>

a.link1 {
display:block;
height:10px;
background:url(image.jpg) no-repeat 0 0;
}

a.link1:hover {
background:url(image.jpg) no-repeat 0 -10px;
}

</style>

<a href="URL1" class="link1">foo</a>

Upvotes: 3

fcalderan
fcalderan

Reputation:

just apply these rules:

.hoverbuttons { ... }
.hoverbuttons:hover { ... }

note: on IE6 and previous :hover pseudoclass will work only on <a> elements.

Upvotes: 0

ceth
ceth

Reputation: 45335

Something like this:

<style type="text/css">
  .some {
      background-color:#0F9;
  }

  .some:hover {
      background-color:#F00;
  }  
</style>
</head>

<body>
<div class="some"> dsadsad </div>
</body>

Upvotes: 0

Lamp
Lamp

Reputation: 1084

http://www.pixelmill.com/support/support_article.aspx?ParentListID=al1015&articleid=kb101543

Upvotes: 0

Buhake Sindi
Buhake Sindi

Reputation: 89209

There are plenty of tutorials in the web:

Upvotes: 0

Related Questions