icon not showing on hover using sass

Black Sulfur
Black Sulfur used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
If you look at the CSS that's generated, you'll end up with this:

.btn--primary:hover__icon {
    visibility: visible;
    opacity: 1;
}

Open in new window

which is clearly wrong. What you actually need is:

.btn--primary:hover .btn--primary__icon {
    visibility: visible;
    opacity: 1;
}

Open in new window

Have a look at this:

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

        $this: &;

        &:hover {
            transform: translateY(-2px);

            #{$this}__icon {
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

Open in new window

Author

Commented:
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! :)
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Good stuff :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial