I need help as to why the buttons are not showing the animation

Below lies my style dimensions for the submit, reset and choose image button:

.Reset {
  border-radius: 25px;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  padding: 25px 25px;
  color: darkgreen;
  background: indigo;
  font: "comic-sans";
  box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.5);
  width: 120px;
  height: 50px;
  transition: transform 2s;
}

.Reset: hover {
  opacity: 1;
  transform: scale(2);
}
<div class="Reset"></div>

What stops the transition from not working? What is the solution?

>Solution :

Wrong: .Reset: hover {}

Correct: .Reset:hover {}

See the snippet below.

.Reset {
  border-radius: 25px;
  border: none;
  box-sizing: content-box;
  cursor: pointer;
  padding: 25px 25px;
  color: darkgreen;
  background: indigo;
  font: "comic-sans";
  box-shadow: 0 0 30px 6px rgba(0, 0, 0, 0.5);
  width: 120px;
  height: 50px;
  transition: transform 2s;
}

.Reset:hover {
  opacity: 1;
  transform: scale(2);
}
<div class="Reset"></div>

Leave a Reply