Day # 70: Directionally aware button

Styling buttons is a great exercise to practice your CSS skills. At the beginning of my web development training I always found it very helpful to practice the most basic CSS principles by styling buttons. I guess it’s the immediate effect of what you’re working on what makes all of this very exciting.

I recently found this video of Kevin Powell in which he styled a button that is directionally aware, ie, depending on where you click you will get a different effect.

The key here starts with the HTML, since we need to create a button that consists of two span elements:

    <button>

        <span></span>

        Click me

        <span></span>

    </button>

Additionally, the real trick is to use the CSS function has(), which “represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element.” This function allows to select which side of the button is being clicked on so that we can handle its consequence as far as style:

  button:has(:first-child:active)::before {

    margin-left: 0;

  }

Another valuable thing that I learned while doing this project is the isolation CSS property, which determines whether an element must create a new stacking context, something that is very helpful if you are dealing with multiple elements and its z-indexes.