CODEWITHSUNDEEP
htmlcssbuttonhovercss-transitions
cosmo479
cosmo479

Reputation: 89

Button CSS Transition not working properly

I have a button which has some text and a font awesome icon that rotates 90 degrees in 0.5s and changes color when hovered. What I'm trying to accomplish is when the user unhovers the button it should take 0.5s to rotate from 90 degrees back to 0 degrees instead of immediately. I would like a smooth transition back to the original state instead of instant on unhover.

Codepen

<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>

.my-button {
    text-decoration: none;
    color: black;
    padding: .2rem;
    border: 2px solid black;
    transition: all 0.5s ease-in;

    &:hover {
        background-color: blue;
        color: white;
        border: 2px solid red;
    }

    &:hover .fas.fa-arrow-right {
        transform: rotate(90deg);
        transition: transform 0.5s ease 0s;
    }
}

Upvotes: 0

Views: 291

Answers (1)

Ayman Morsy
Ayman Morsy

Reputation: 1419

you didn't specify the target i:

try this

.my-button {
  text-decoration: none;
	color: black;
	padding: .2rem;
	border: 2px solid black;
	transition: all 0.5s ease-in-out;
  
  & i{
    transition: all 0.5s ease-in-out;
  }

	&:hover {
		background-color: blue;
		color: white;
		border: 2px solid red;
	}

	&:hover .fas.fa-arrow-right {
		transform: rotate(90deg);
	}
}

Upvotes: 1

Related Questions