Button Hover and Active Click Not Working-CodePudding

I know this questions has been asked a dozen times, but I can't seem to get my button to have a hover and pressed effect. I am trying to have the color of my button change when I hover over it. I would also like the button to have an active pressed effect when clicked. I feel like it has something to do with my css linkage, but I have tried a bunch of different combinations and still can't get it to work.

HTML

 <a href="#">
    <button>Click for Plans</button>
  </a>

css

button {
  background-color: #3AF8AB;
  border-style: none;
  color: white;
  position: absolute;
  border-radius: 10px;
  font-size: 3.5vmin;
  margin-top: 0px;
  font-weight: bold;
  padding: 7px;
  margin-left: 73%;
  margin-right: 1%;
  cursor: pointer;  
}

.button:hover {
  background-color: blue;
  transition: 0.7s;
}

.button:active {
  background-color: blue;
  box-shadow: 0 5px #666;
  transform: translatey(4px);
}

CodePudding user response：

button:hover and button:active in css are class and you have element. You can add the class button to your button or change the style to button ( and not .button )

button {
  background-color: #3AF8AB;
  border-style: none;
  color: white;
  position: absolute;
  border-radius: 10px;
  font-size: 3.5vmin;
  margin-top: 0px;
  font-weight: bold;
  padding: 7px;
  margin-left: 73%;
  margin-right: 1%;
  cursor: pointer;  
}

button:hover {
  background-color: blue;
  transition: 0.7s;
}

button:active {
  background-color: blue;
  box-shadow: 0 5px #666;
  transform: translatey(4px);
}

    <button>Click for Plans</button>