CSS Hover Animation Not Working / Hover Does Not Work

Question

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 class="btn__1"><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.

<center> is an obsolete element and should no longer be used. — Paulie_D
– Paulie_D, Commented Mar 6, 2022 at 12:56
Is there any alternatives for <center>? Or do we use , text-align : center; with CSS for the replacement of <center>? — etacre
– etacre, Commented Mar 7, 2022 at 16:26

Rickard Elimää · Accepted Answer · 2022-03-06 12:43:31Z

2

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 class="btn__1"><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button>

answered Mar 6, 2022 at 12:43

Rickard Elimää

7,6763 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

etacre Over a year ago

This helped me so much! This is exactly what I wanted. Thank you!!

miftahulrespati · Accepted Answer · 2022-03-06 12:47:53Z

1

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 class="btn__1"><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>

answered Mar 6, 2022 at 12:47

miftahulrespati

5161 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS Hover Animation Not Working / Hover Does Not Work

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related