CODEWITHSUNDEEP
javascripthtmlcss
Kiyoshi
Kiyoshi

Reputation: 1

Making a div into a button that changes color when I press it

I would like to make a div into a button with a background that changes color when I mouse over and another color when I press it. What I want to do is have the button behave like a link that takes me to another page when I press it.

Can you tell me if this is simple to do. How do I make the colors change? If you have any example I would really be thankful for your help.

Upvotes: 0

Views: 1170

Answers (1)

user113292
user113292

Reputation:

As long as the <div> doesn't contain any interactive content (for example, a link or a <button> element), you can do something like this:

<a href="http://example.com">
  <div id="awesomediv">Foo</div>
</a>

Then use the CSS pseudo-classes :hover and :active to style the <div> element:

a:hover #awesomediv {
  background-color: green;
}

a:active #awesomediv {
  background-color: blue;
}

Which would make the <div> element turn green when you hover over it and turn blue when clicked.

Upvotes: 1

Related Questions