0

I want to make the ::after pseudo element act as a shadow that stays in place, but the button has a translate on :hover.

button {
    border: solid 1px black;
    border-radius: 4px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    position: relative;

    &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: black;
        left: 2px;
        top: 2px;
        z-index: -1;
        border-radius: inherit;
    }

    &:hover {
        transform: translate(-4px, -4px);

        &::after {
            transform: translate(4px, 4px);
        }
    }
}

enter image description here

Everything's fine until I hover.

enter image description here

Also, why is just the background covered by the pseudo element, leaving the button text on top? How do I get around this?

Nikhil CSB
  • 155
  • 9
  • Have you heard about `box-shadow` CSS property? It might make your life easier. – Kosh Nov 06 '20 at 18:00
  • I have, doesn't work as expected. Is there a way to show just the box shadow? When I do a background transparent on the `::after`, the shadow is only visible where the element doesn't exist. There's a gap between the translated bg of the actual button and the shadow (body bg in between). – Nikhil CSB Nov 06 '20 at 18:14
  • Quick example: https://jsfiddle.net/rfzL12hx/ – Kosh Nov 06 '20 at 18:21

0 Answers0