Link to home
Start Free TrialLog in
Avatar of Crazy Horse
Crazy HorseFlag for South Africa

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.

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

Open in new window


<a href="#" class="btn btn--primary">Discover More <i class="btn--primary__icon icon-basic-clockwise"></i></a>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Crazy Horse

ASKER

Hey Chris, long time no speak! That works great, thanks so much. yeah, I looked at the compiled css and also saw that dodgy syntax there. It's working now. Cheers! :)
Good stuff :)