Playing With: Pseudo-elements: Buttons

Dear all forgive me; it's been 47 Days 12 Hours 5 Minutes 16 Seconds since my last post. I have been busy doing a lot of fun things with Vue and Wordpress (there might be articles on those later).

I wrote the code that was going to be used in this article ages ago but I never found the time to actually get started on the article. Where does the time go, am I right?

So without further ado, let's get to it. This time we're gonna create a simple button animation using nothing but pseudo-elements (duh!). Here's how it will look:

Setting the stage

Nothing fancy here to be honest just a simple anchor tag with text inside it.

<a href="#">SUBMIT</a>  

Pretty simple. As usual the devil's in the CSS. And there's a lot this time around.

a {
              font-weight: bold;
              text-decoration: none;
              color: white;
              padding: 1rem 4rem;
              border: 2px solid rgb(0,0,0,0.3);
              border-radius: 2rem;
              position: relative;
              background-image: linear-gradient(to right, firebrick 50%, #C14E4E 50%);
              background-size: 200% 100%;
              background-position: left;
              transition: 0.5s all ease-out;
              overflow: hidden;
}

a:hover {
              background-position: right;
              letter-spacing: 5px;
}
          }

Okay so let's get through all of this funky CSS before we get into the pseudo-elements. Some of it is pretty self-explanatory while some of it isn't. I'll address the not so obvious ones.

Background Image

You're probably wondering why there's a gradient on the button when there's only one colour (showing) on the button. Well, in the previous article, I used pseudo-elements to create a sliding effect but this time, I went a different route.

By creating a gradient and expanding the background size by 200% then moving the background from left to right on hover, I can replicate the sliding effect. I'm not sure how if that explanation made any sense at all so I created an image to go along with it.

Okay now that this part is out of the way. Let's style the pseudo-elements.

a:after {
              content: '\f054';
              color: white;
              text-align: center;
              font-weight: 900;
              line-height: 48.4px;
              position: absolute;
              height: calc(100% - 2px);
              width: 48.4px;
              background-color: #C14E4E;
              border-radius: 50%;
              right: 1.5px;
              bottom: 1px;
              display: inline-block;
              transition: 0.5s all ease;
              font-family: 'Font Awesome\ 5 Free'
          }
          
          a:hover:after{
              right: calc(100% - 48.4px - 1.5px);
          }

So when I came back to write this article almost a month and a half after writing this code. I wasn't sure this was the best way to go around it but I feel if I wait until I can create something neater I'll delay on the article so that's why I'm going ahead with this. If I eventually create something neater, I'll update this article.

The Breakdown

content: We've been over this, we usually leave it empty but this time we're putting in the unicode value f054 which is the chevron-right icon in font-awesome.

line-height: you'd need to inspect the element to get the height of the button and put it here to ensure that the content (the chevron-right icon) is vertically centered.

height: we use a calc value here because why do the math when CSS can do it for you. We don't want the circle to be flush against the button, we want a little bit of space in this instance 1px down, 1px up.

right: this places the circle 1.5px away from the right.

At this point the button looks like this.

How does it look?

On hover we then transition the pseudo-element to the left hand-side of the button but because we set it's position using right in order to create that smooth transition effect we need to set the new position using right as well. That's where the calc comes in. We calculate 100% width and take away the width of the circle and the 1.5px padding that we've enforced.

NB* The reason we're using percentages here is because we're animating the letter-spacing and the width is changing so using 100% ensures that everything fits properly into the new width.

NB** I think I may need to do another article series about all the fun ways you can use CSS Calc.

At this point you can even rotate the pseudo-element or change it to a different icon.

The movement of the pseudo-element from right to left and the background from left to right creates that smooth effect as though the element is pulling the new colour with it as it moves.

There's a lot of button animations we can do with pseudo-elements but I think this is the last or second-to-the-last article I'm going to do on it.

Hopefully, this article was educative or useful to you. Let me know if; there's something I missed, you have a neater way of doing this or you have something you'd like me to cover in another article.

Cheers