Styling buttons with Tailwind CSS is easy. But what if you want to animate them? In this tutorial, I will show you how to make your own animated emoji buttons. To start off head over to Tailwind Play and copy the following code into the editor.
The button has some basic styling including a background color, a shadow, and a border radius. The button also has some padding and a space between the text and the emoji.
Now that we have a basic button, let's add some hover effects. To do this, we will use the hover: prefix. This prefix allows us to add styles that will only be applied when the user hovers over the button. In this case, we will add a transition effect and a background color. The transition effect will make the button move up and down when the user hovers over it. The background color will change when the user hovers over the button.
We will also add the "transition-all duration-150 ease-in-out" classes to the button. This will make the transition effect smoother.
Lastly, we will add some more hover effects. We will add a group class to the button. By adding the group class to our button we can now add the group-hover: prefix to the inner parts of our button. This will make the text and the emoji change when the user hovers over the button.
The group-hover: classes we will be adding will make the text white and hide/reveal the emojis when the user hovers over the button.
Awesome! Now we have some snazzy buttons. Try being creative with your animations by playing with the transition time or even by trying other transition effects like scale or opacity.
You can also get very creative with your emoji transitions as shown in the example buttons I have included here. Feel free to shoot me a message on Twitter @GmoMedel if you have any questions or if you want to show me your creations!
Visit my Codepen for a live example
