October 24th 2023

Posted on Oct 24 • Originally published at cruip.com The Call To Action is the most important element of an interface, as it enables users to turn their intentions into actions, and products to finalize a specific goal (e.g., converting a prospect to a free trial).In all our Tailwind templates you'll find at least one Call To Action. We designed them in unlimited shapes and styles, with the ultimate goal of creating a connection between products and end users.Generally, we like to design simple and straightforward CTAs, but for this tutorial (which was inspired by Glide), we decided to create a Call To Action animation using Tailwind CSS.We are going to build a fake button that triggers multiple animations when you hover over it:Alright, let's start by creating the basic structure for our CTA. We'll use the

tag as a container and the tag to make everything clickable.The setup is pretty simple. The only thing to highlight is that we've used pseudo-attributes before and after for the moving text. This lets us duplicate the text without creating another element.Before defining the rest of the style, let's see how to change the background color when the mouse hovers over it. We will use the before pseudo-attribute to create an overlay.To make a smooth transition between the default content and the hover content, we'll position the latter absolutely with opacity 0. And with Tailwind's group-hover: modifier, we'll switch the opacities.Now, let's style the button. First, we'll define the style for the default text. We'll use a bunch of Tailwind utility classes to set padding, background gradients, border gradients, and more.Once we've got that down, we can move on to styling the “hover content”:And finally, we'll add a few more classes to define the style for the last portion of the text:And that's it! We've created a smooth transition from light to dark mode when you hover over the button, and we've added a cool crossfade effect.Now we can move on to the most interesting part: creating the text scrolling animation and the button border shine effect.To create this type of effect, all we need to do is define a custom animation in the Tailwind configuration file. We'll call it infinite-scroll and set it up to scroll from right to left. Here's the code:Once we have that animation set up, we can easily apply it to our pseudo-element by using the class animate-infinite-scroll. Like this:This is the final step to complete our CTA. To make the shine effect, we'll use a linear gradient and apply it to the before pseudo-attribute of the button element. Since this gradient is a bit complex, we'll take advantage of Tailwind's arbitrary values feature to achieve it.To really make the shine effect pop, we'll also add an infinite rotation to the gradient. We don't need to create a custom animation for this. We can just use Tailwind's animate-spin, and use a custom class to change the default rotation time, just like this: animate-[spin_3s_linear_infinite].So, here's the updated code:With the new arbitrary values feature in version 3, Tailwind CSS has become an incredibly flexible tool. It lets us make complex effects like the one we've shown you without writing a single line of CSS.If you're hungry for more CSS animations like this, we recommend checking out our Tailwind tutorials. For example, we've got a guide on how to make an animated number counter, as well as one on how to create an infinite horizontal scroll animation.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Freecodez - Oct 12 Yeom suyun - Oct 21 Tony Lobbin - Sep 29 Szymon - Oct 2 Once suspended, cruip_com will not be able to comment or publish posts until their suspension is removed. Once unsuspended, cruip_com will be able to comment and publish posts again. Once unpublished, all posts by cruip_com will become hidden and only accessible to themselves. If cruip_com is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Cruip. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag cruip_com: cruip_com consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging cruip_com will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.

What are AAA Games? A Deep Dive into …
Meet The 8-Year-Old Nigerian Sensatio…
â€˜Simpsonsâ€™ Jokes About America Th…
Is the Samsung Galaxy Tab S8 Tablet G…
Latin America: 18 Enthralling Facts A…

This post first appeared on VedVyas Articles, please read the originial post: here