# How to Create Beautiful Animated Buttons with TailwindCSS

## Метаданные

- **Канал:** Nick Saraev
- **YouTube:** https://www.youtube.com/watch?v=VUpk-aMnneg
- **Дата:** 03.03.2021
- **Длительность:** 10:45
- **Просмотры:** 2,009
- **Источник:** https://ekstraktznaniy.ru/video/13034

## Описание

Want to create animated buttons with TailwindCSS? Tailwind's animate utility classes are perfect for encouraging users to take certain actions on your website or app. 

In this short TailwindCSS tutorial, I show you how to build a quick and easy button that employs animate-pulse for a slight oscillating 'sheen' that can help improve your clickthrough rates substantially.

Note: I just realized I forgot to include hover classes on the button! Add the following utilities to the parent button to instantly make your design more interactive: 'hover:text-gray-400 hover:shadow-md transition duration-300'.

Thanks for watching.

## Транскрипт

### Intro []

what's going on guys in this video i'm going to show you how to make a beautiful animated glowing button just like this using tailwind css this is really good for call to actions it's really good for nav bars and it's really good anywhere you want to indicate to the user that this is an option that you really want them to take in this case this is trying a app that i'm building here to help you make thumbnails for free so i'm going to show you guys how to make something that basically looks exactly like this i mean it's going to be a little bit different but essentially i'm going to show you guys how to animate things in tailwind and get them looking really nice and sexy so to get started first of all this is

### Getting Started [0:35]

where we are we're in this little dark call to action component that i made uh and essentially it's just a full width background gray 800 container with a little bit of padding down at the bottom it looks just like this we have this reusable primary button component which is what i'm going to essentially be building and that's just right over here but instead of diving into that code i'm actually just going to walk you guys through it basically from scratch so the first thing i'm going to do is just make the second div here with the little mt8 just to pump us down a little bit and i'm going to add a little bit of starter text in this just so you guys can see what this might look like awesome so this is us this is where we are right now this is ultimately where we want to be so first thing you

### Designing the Button [1:16]

have to do is let's just give this a little bit of padding right off the bat so i'm just going to go px4 py2 actually let's go px5 py3 i found with buttons it's almost always better to be on the safe side and make it a little bit bigger let's also add a little bit of a background color in this case background indigo 600 and let's make the text white and let's see what this whole spiel looks like already okay cool so we actually have something that's reasonably close already it looks like this button is actually a little bit wider so uh looks like we turn this to a six and maybe we'll make this background just a little bit darker here to match this up and i'll show you why this isn't actually the way the button works so it's a little bit different than this but essentially we have something right now that's like a decent i guess a width it's like a decent look it's very similar to the ultimate button that we're going for there's one more little element that we need to solve before we can start doing the hover effects and this little animated pulse thing that i have going on and that's this svg so let's really quickly solve that as well

### Adding the SVG [2:16]

first thing i'm going to do is i'm going to make this entire button a flex div i'm going to add item center that's just going to push everything into the middle vertically of the div and then i'm going to add a space x let's do 2 for now this is going to add a little bit of space between the various divs inside of this button and speaking of divs i'm going to wrap this text here in a span and then i'm going to use this kind of flex effect to add an svg and then i'm going to style that svg just using tailwind so in order to find our svg uh i just go over here heroicons it's made by the makers of tail and css just a fantastic place to get pretty much anything and i don't even need to search anything up actually because my arrow that i want is right here just arrow narrow right i can copy the svg just by clicking that button and then it's literally as easy as just command v or control v to paste now i'm going to add a couple classes to this svg namely i'm going to make it big or rather big enough that you can see so width for h4 and i'm going to save that and why don't we just take a look at what that looks like now you see this actually disappeared basically completely uh and the reason for that is i don't know so let's add a quick justify center here and uh see whether or not this ruined our beautiful button by any means hold on i think if i were to take this svg out save this scroll all the way down to the bottom yeah there we go it's all the way over here because this is a basically a full width div so why don't i actually go uh text center and let's also mx auto this just in case that should pump that oops should pump that all the way to the middle there we go okay

### Final Touches [4:06]

so let's paste that svg back in awesome i got that svg now we're going to see that little arrow pop up and actually it's a little too wide so why don't we change that px6 to a px5 that should line up a little better i think that's a lot more organic perfect uh and looks like we're basically good to go yeah that's basically it when it comes to adding this button i mean the text style and all that stuff is pretty simple i'm not using a font that's bold or anything like that although i could actually add font semi but probably look a little bit better so yeah let's do that a last thing i'm going to do is just route a add a quick rounded sm class to this to round the corners a little bit just takes off some of the harshness of that button and let's add a little bit of shadow while we're doing this too screw it perfect now the real question is with all that said how do i get this really cool sexy kind of like a ring that's animated and changing colors and stuff like that and it's actually quite easy to do with tailwind i'll show you guys how the real trick here is you want to use the parent container this button here and add a relative class to it that just means that you can put an absolutely position div inside and it'll be positioned relative to this div rather than any other div here so speaking of which we're going to add an absolutely position div here we're going to say it's inset 0 it's width full height full let's add an absolute class here too and for now why don't we go bg uh indigo 700 i don't think we're gonna be able to see this anyway in all honesty so that doesn't really matter but then let's also add a quick ring let's use some of tailwind's ring utilities here to add a ring that's indigo 600 and let's say it's ring two and let me close that div and let's see what we end up getting perfect okay that's exactly what we wanted a style that was really similar to this granted i think i want the ring to be a little bit thicker in all honesty because i think two is a little uh it's not enough to get that really sexy kind of look so why don't pump that up to four and then while i'm at it why don't i take that px5 and go px4 on the parent div there you go that looks really nice to me okay now obviously the issue is we see this kind of like oscillation and we haven't added that oscillation and we also need to add a little bit of rounding on each of these because right now it's not rounded it's a really easy way to do that one of the reasons i really like rings in general because if you add a rounded clasp to the container the ring will automatically kind of round to fit your rounding so you don't need to like you know add any extra border radius or anything like that it's one of the reasons i really like tailwind okay so with that said now uh what else do we need to do to make this work well it's actually quite simple we now that we have this absolutely position div under this relative class or rather this relative button this is actually positioned on top of that button which is why we don't see that try for free text anymore so we have to change what's called the z index of that layer to make it so that our button text actually pops out on top and it's really easy to do all you have to do is just add a zero on whatever it is that you want to be behind and i usually just use a z10 on whatever i want to be in front so in this case i had a z10 to the text you see the text pop up and all you need to do is just add a z10 on the svg as well perfect so now we actually have that z10 we can see the text that's popping up uh and now we have you know this overlay here which is basically what we want okay so when i remove that bg and it goes 700 see if that changes things i don't think it will yeah there you go so that's not actually unnecessary i like to minimize and remove as much code that's not explicitly necessary so it's always a good idea to go back and do a little bit of refactoring since your ultimate tailwind bundle size is based off of uh i think it's called tree pruning or something like that which is basically where it just goes in sees unused classes and then deletes all of those anyway so we have something that looks like this how do we get that cool kind of animation look it's actually super easy since we have a div that's behind our other div right we have that ring that's kind of popping up if you want to animate it all you need to do is add two simple classes tailwind offers a way to pulse things spin things ping things and bounce things and in our case we want it to pulse which is basically just like the opacity changes on a linear level from 0 to 100 over time all right and this is ultimately what we end up with this like nice kind of like opacity change that's very gradual somewhat linear and you can think of it like a uh periodic kind of like sine function if you guys remember from school the opacity is basically going up down and it's doing it pretty consistently it's something that draws the eye quite a bit in my experience granted we're still a little ways away from getting that nice sexy sheen that we have there and that's because uh we should set the ring opacity to something a little bit lower i think 60 would probably look good yeah that looks a lot better to me and i also want to change the background a little bit like i mentioned at the very beginning just because i think that there's a very subtle effect that a lot of new designers are doing it has a name but i'm not like a genius designer so i don't like keep up with all these design trends but essentially instead of using a flat color for the background of a button or really any modal or any div they use a very slight gradient that almost just barely tricks the eye into thinking that there's more going on than there actually is what do i mean by this well let me show you intel and it's super easy to do instead of like a bg of indigo 700 for example why don't i do a bg gradient let's do two right then from indigo like 600 to indigo 700 it'll actually add a slight gradient on our button and you can see that gradient pop up here in this case it's actually a little much i don't actually like that much so why don't we go 700 to 800 that would be a little harder to see yeah there you go that looks a lot better to me and you can see there's this very slight kind of like effect here on the background you can almost barely tell that it's actually going on but it adds a little bit of depth that button and makes it look really good and i actually see why i didn't add a font semi bold to this button uh when i first made it by the way and i think that's just because it's a little much there's a lot going on so if i remove that font semi bold this is ultimately the finished product this is what we end up with and it's uh it's a button that kind of draws the eye you can use this anywhere you want in my case i use this very liberally in all my call-to-actions i use it right here my hero header and i also use it in my nav bar and i use this on a bunch of projects so i hope that was helpful guys i hope you like the style of that button if you guys have any questions or anything like that feel free to let me know but taylon's animation library is fantastic and i'm really happy to have the opportunity to use it in this way thanks for watching have a lovely rest of the day