How to make HTML button darken when hovered over?

Question

I'm looking to make a html button darken in colour when hovered over.

The code I'm using is below:

<div style="width: 200px; color: white; background-color: #bf8f42; opacity: 0.8; margin: auto; margin-top: 0px; padding: 20px;">Training</div>

Possible duplicate of [How can I change a button's color on hover?](http://stackoverflow.com/questions/3898781/how-can-i-change-a-buttons-color-on-hover) — Vlusion, Apr 20 '17 at 12:15
By not searching SO's vast archive of existing answers before posting your question, you waste your own time and the time of others who help you and who moderate you. Please practice better SO citizenship. — mickmackusa, Apr 21 '17 at 20:31

Vlusion · Answer 1 · 2017-04-20T12:32:14.770

1

Try out this part of code:

<style>
div:hover{
background-color: #000000;
}
</style>

edited Apr 20 '17 at 12:32

answered Apr 20 '17 at 12:14

Vlusion

79
1
14

Thanks for the feedback, Ill take that with me – Vlusion Apr 21 '17 at 22:06

score 1 · Answer 2 · answered Apr 20 '17 at 12:30

you can give a class to your div element and add some styling in style tag in tag. Here is full HTML code for the button with a bit darken on hover

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn-training
{
width: 200px; 
color: white; 
background-color: #bf8f42; 
opacity: 0.8; 
margin:0 auto;
padding: 20px;
text-align: center;
}
.btn-training:hover
{
background-color: #9f7f31;
}
</style>
</head>
<body>
<div class="btn-training">Training</div>
</body>
</html>

Please edit your answer to include some explanation. Code-only answers do very little to educate future SO readers. — mickmackusa, Apr 21 '17 at 20:27

score 0 · Answer 3 · 2017-04-21T18:15:45.233

0

Explanation:

When the user hovers over the class (test) it triggers the css element .test:hover. :hover is a anchor pseudo-class. you can use these types of classes in various ways Shown Here.

.test:hover {
    background: #000000;
}

<div class="test">text</div>

edited Apr 21 '17 at 18:15

answered Apr 20 '17 at 12:11

Please edit your answer to include some explanation. Code-only answers do very little to educate future SO readers. Your answer is in the moderation queue for being low-quality. – mickmackusa Apr 21 '17 at 17:01
K, will do. But also every other answer on this question doesn't have a explanation of what the code does. – Apr 21 '17 at 18:10

score 0 · Answer 4 · answered Apr 20 '17 at 12:16

0

Try something like this,

div:hover{
  background-color: #000000;
  opacity:1;
}

answered Apr 20 '17 at 12:16

Ahmed Ginani

6,522
2
15
33

Please edit your answer to include some explanation. Code-only answers do very little to educate future SO readers. – mickmackusa Apr 21 '17 at 20:27

score 0 · Answer 5 · answered Apr 20 '17 at 12:16

0

This code might help you for changing colors while hovering

<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
    background-color: yellow;
}
</style>
</head>
<body>

       <input type="button"  /> 

 </body>
</html>

answered Apr 20 '17 at 12:16

Shabarish Shetty

132
2
12

vinod joshi · Answer 6 · 2017-04-22T11:21:03.300

0

Try this solution:
    .btn-test {
      width: 200px;
      color: white;
      background-color: #bf8f42;
      opacity: 0.8;
      margin: auto;
      margin-top: 0px;
      padding: 20px;
    }

    .btn-test:hover {
      background-color: #a26d19;
    }
 <div class="btn-test">Training</div>

edited Apr 22 '17 at 11:21

answered Apr 20 '17 at 12:28

vinod joshi

90
8

This worked, however I can't seem to increase the button size plus it moves another button the the right. @vinod joshi – baines Apr 20 '17 at 12:52
Please edit your answer to include some explanation. Code-only answers do very little to educate future SO readers. – mickmackusa Apr 21 '17 at 20:26

How to make HTML button darken when hovered over?

6 Answers6