Кнопка CSS Переход не работает должным образом - PullRequest
Новая
       60

Кнопка CSS Переход не работает должным образом

0 голосов
/ 19 января 2020

У меня есть кнопка с текстом и значком шрифта, который поворачивается на 90 градусов за 0,5 с и меняет цвет при наведении. То, что я пытаюсь сделать sh, - это когда пользователь открывает кнопку, ему нужно 0,5 с, чтобы повернуть с 90 градусов назад на 0 градусов, а не сразу. Я бы хотел плавного перехода обратно в исходное состояние вместо мгновенного при наведении.

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;
    }
}

1 Ответ

1 голос
/ 19 января 2020

вы не указали цель i:

попробуйте это 

.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);
	}
}
...