CODEWITHSUNDEEP
css
Alaa Mohamed
Alaa Mohamed

Reputation: 1

Hovering Effect in a button isn't working with css modules in react

I have 2 different hovering Effects on a button. The one with the .Red class works perfectly fine but the general .Button class doesn't.

.Button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
};
//this one doesn't work
.Button:hover {
  background-color: lightgreen;
  color: black;
}

.Button.Red {
  background-color: red;
}

.Button.Red:hover {
  background-color: salmon;
  color: black;
}
<button class="Button">Click Me</button>

<button class="Button Red">Click Me</button>

Upvotes: 0

Views: 317

Answers (1)

Bennviddesign
Bennviddesign

Reputation: 81

You have a ";" after "}" remove it and it should work.

.Button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
};

Upvotes: 1

Related Questions