CSS Hover Animation Not Working / Hover Does Not Work-CodePudding

My CSS Hover is not working properly. I was trying to make a transition & animation for a button when you hover but it does not work. My code :

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 4;
  translate: scaleY(-8px);
}

<center><button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>

Please help me! Sorry if there is any grammar mistakes.

CodePudding user response：

translate and scale are properties to transform. Also, opacity ranges between 0-1, and you got opacity: 4 on :hover. I presume you want to translate (move) and change opacity to 0.4, otherwise you need to explain better what you want to achieve.

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 0.4;
  transform: translateY(-8px);
}

<button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button>

CodePudding user response：

I change your code a little from:

translate: scaleY(-8px);

to:

transform: scaleY(0.8);

and it does work. I suggest you to read this documentation.

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 4;
  transform: scaleY(0.8);
}

<center><button ><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>