Creating cool CSS button effects using transitions -

With this article in which we will create cool CSS buttons using transitions, we will start a new post series in this blog. Hope you have fun!

Introduction

Hovering over an article, clicking on a link, or triggering an event are activities that all of us, as web users have done while browsing the web. And truth to be told, animating HTML elements can and will (if it isn’t done excessively) improve the experience of browsing the web, by making the interaction more fluid and immersive. Well, CSS transitions help us control animations by changing the properties of elements using customizable intervals or accelerations.

With CSS transitions, we can decide which properties we want to animate (by selecting them), when to start the animation (by setting a delay), how long will the animation last (by setting a duration), and how the transition will be run (using a timing function).

We will learn all of this by creating a couple of cool buttons with hovering effects. So let us begin!

Transitions

First of all, we will just quickly go over transition basics. CSS transitions are quite an exhaustive topic, so if you want to learn more, you can find more digging the net, especially more formal information. Here we will just pick up on some basics so that you can make create cool animations immediately! Let us create a simple box using HTML and CSS, and let us add a hovering effect. When we hover on the box… we notice that the hover works… but it doesn’t work as intented – it isn’t smooth, there is no ‘cool’ transition.

We can add that smooth transition by using CSS animations. We will add several properties, that start with the word transition, for example, transition-duration, transition-delay, transition-timing-function, and transition-property.

CSS Transitions Explained — CSS transitions Explained Simply

Now if we hover over our element – we will see that, we have created an animation that lasts for 500 miliseconds, it has no delay (it starts automatically when we hover over the element), we use an ease-out transition function (starting our animation quickly, then slowing down as the animation continues), and we set our transition-property to width, which says that the animation will only apply on the selected property.

Buttons

Now when we know the basics, we can start creating some buttons!

You can look and interact with all of the elements at the end of the article, I’ve linked my codepen with all the code!

Button #1

This one will be a simple one to start. We will set a background color of salmon (I don’t know why, but I like that color!), some basic styles for width, height, margin, and font-size, and then the styles for this specific button (using our button1 class name), we selected the transition-duration and the transition-timing-function. Then, we need to add the hover selector, and inside the hover we will just do a switcharoo, setting our background-color to salmon, and our text to white and this is our result:

Button #2

This animation starts from the bottom! For this, we will create an :after pseudo-code element, that we will additionally style! We’ll absolutely position this element and set the left, bottom, and height attributes to 0. Then, when we hover on the element we will increase the height which will create this raising effect of the button!

Button #3

Another cool effect, this one is similar to the second button because it uses pseudo-elements, but has two of them, both :before and :after are in use here (because we have two ‘artefacts’ to animate), and with them we create this overlay effect going from both borders of the element.

Button #4

To create this growing from the center effect, we set the initial width and height of the :after element to zero, and on hover the element will expand using a cubic-bezier method, which kinda expands over the limit of the animation, thus getting this crisp going-past-the-border animation.

Button #5

Similar to the button number 3, we create this button using both :before and :after pseudo-elements, but this time the pseudo-elements themselves will have a small height, so that that they behave as a moving border.

And here we have our codepen:

See the Pen CSS Transitions by Mehmed (@brachika) on CodePen.

Which button effect is your favorite? Leave your comments below in the comment section, and until next time :).

Please check other blog posts on thedukh.com. For more CSS articles click on one of the links below:

Facebook Tweet Pin LinkedIn

Creating cool CSS button effects using transitions