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>