CODEWITHSUNDEEP
htmlcss
etacre
etacre

Reputation: 11

CSS Hover Animation Not Working / Hover Does Not Work

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.

Upvotes: 0

Views: 67

Answers (2)

miftahulrespati
miftahulrespati

Reputation: 518

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>

Upvotes: 1

Rickard Elim&#228;&#228;
Rickard Elim&#228;&#228;

Reputation: 7591

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>

Upvotes: 2

Related Questions