CODEWITHSUNDEEP
htmlcss
SewerSleuth
SewerSleuth

Reputation: 39

Button Does not Change Colour on Hover

I have a css class assigned to a button like this:

.button {
  margin: 4px;
  padding: 4px;
  width: 96%;
  height: 48px;
  max-width: 250px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: normal;
  color: #232856;
  border: 1px solid #3d8b40;
  border-radius: 8px;
  background: #f1f1f1
}

.button a {
  color: #232856;
  text-decoration: none
}

.button a:hover {
  color: #f1f1f1;
  background: #232856
}

The .button works perfectly, does everything I need it to do.

But the a and a:hover parts do nothing.

Any ideas?

Upvotes: 0

Views: 1115

Answers (4)

Weyers de Lange
Weyers de Lange

Reputation: 290

I think I broke my BUTTON!

   

 <!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn {
  background-size: 10px 10px;
  background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
  height: 600%;
  transform: rotate(-35deg);
  transition: 0.3s;
}

.btn:hover {
  color: gold;
}
</style>
</head>
<body>

<br><br>

<button class="btn btn-default btn-lg">Hover Over Me</button>

</body>
</html>

Upvotes: 0

pullidea-dev
pullidea-dev

Reputation: 1803

Change to

.button:hover a{
// styling when on hover
}

Upvotes: 0

ulou
ulou

Reputation: 5853

I think that you might forgot about class for button, if you want to do it general then use button in styles instead of .button.

Also you forgot about semicolon after text-decoration: none, so this lane and every css style below in same block scope is not applied.

.button {
  margin: 4px;
  padding: 4px;
  width: 96%;
  height: 48px;
  max-width: 250px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: normal;
  color: #232856;
  border: 1px solid #3d8b40;
  border-radius: 8px;
  background: #f1f1f1;
}

.button a {
  color: #232856;
  text-decoration: none;
}

.button a:hover {
  color: #f1f1f1;
  background: #232856;
}
<button class="button">
  <a href="#">My a inside button<a>
</button>

Upvotes: 0

Aidan Young
Aidan Young

Reputation: 614

You can get rid of the a: hover and instead just use the button: hover { Here is the code:

 .button {
  margin: 4px;
  padding: 4px;
  width: 96%;
  height: 48px;
  max-width: 250px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  white-space: normal;
  color: #232856;
  border: 1px solid #3d8b40;
  border-radius: 8px;
  background: #f1f1f1
}

.button a {
  color: #232856;
  text-decoration: none
}

.button:hover {
  color: #f1f1f1;
  background: #232856
}

That should work. When you need something with a hover effect such as a button, you dont need to include the a:, just write button: hover

Upvotes: 1

Related Questions