Crazy Horse
asked on
icon not showing on hover using sass
I am using scss and trying to hide an icon and when I hover the button I want the icon to display. I also want to animate it so I can't use display:none as I believe you can't animate that. So I have tried to use opacity and visibility.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
I have 2 problems. Firstly, The text in the button is not centered because the icon is there in an invisible state yet when you go to dev tools you can still see it there. Secondly, the icon does not appear on hover.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}
<a href="#" class="btn btn--primary">Discover More <i class="btn--primary__icon icon-basic-clockwise"></i></a>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Good stuff :)
ASKER