advanced CSS animations: make 3 cool button effects, a lighting text animation & a smoky text effect | Ahmed Sadek | Skillshare

advanced CSS animations: make 3 cool button effects, a lighting text animation & a smoky text effect

Ahmed Sadek, full stack web developer, freelancer & t

advanced CSS animations: make 3 cool button effects, a lighting text animation & a smoky text effect

Ahmed Sadek, full stack web developer, freelancer & t

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (37m)
    • 1. 1 - class intro and what we are going to build

      1:53
    • 2. 2 - creative button hover effect 1

      5:38
    • 3. 3 - animated button with css animation

      6:49
    • 4. 4 - creative button hover effect 2

      5:09
    • 5. 5 - lighting text with css animation

      5:20
    • 6. 6 - smoky text effect

      5:03
    • 7. 7 - heartbeat with css animation

      7:11
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

4

Students

--

Projects

About This Class

in this new class of the creative CSS animations series we are going to create:

3 new cool button hover effects

a lighting text animation

a smoky text effect

and finally we will create a heartbeat animation

Meet Your Teacher

Teacher Profile Image

Ahmed Sadek

full stack web developer, freelancer & t

Teacher

Hi, it's Ahmed, glad you made it here!

i'm a senior web developer working as a freelancer for the last 7 years, i've developed hundreds of web projects and have tens of happy clients!

i've helped companies of all sizes to improve their business.

i can't wait to share all the web development knowledge i have with students here in skillshare so if you're interested in learning modern web development technologies we will see each other inside my courses!

 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 1 - class intro and what we are going to build: Hello everyone, welcome to this new class and the creative CSS animation series. This is your instructor, Ahmed Sadat, and I will guide you through the different examples and projects you are going to create through this class. So without further ado, let's see some examples of just what we are going to create together during this class. 2. 2 - creative button hover effect 1: Hello everyone. In this lesson, we are going to create this nice hover effect. We will be using both the before and the after pseudo elements in this example. So let's see how we can do that. Well, first of all, I will start right here in the HTML, and I will add an anchor tag. And just say hover me. Then we need to go to our CSS and add some styles. So I will target the anchor tag. Then I will add text, decoration. None. Background color. This nice dark gray color. Font-family. San serif. Font size 40 pixels, border, four pixels, solid, and the dark gray color. Then I will add padding, 40 pixels from top and bottom and 80 pixels from left and right. And finally, I will add position relative. Good. Now let's start work on the before and after pseudo elements. I will create the before pseudo elements for our Link. And I will say content. When the words hover me, then position absolute, top, 0, left, 0, height, 100%, width, 100% as well. Then background-color with nice yellow color. Then color, our dark gray color. And now we need to send to the content inside of it. And we will do that using flexbox. So I will add display flex, then justify content center in order to center it horizontally. Then align items center as well in order to ascend to the content vertically. And finally, I will go and add transition or 0.5 seconds gray. So now we have the before pseudo element with this yellow background set on top of our link. Now let's work on the after pseudo element. I will just copy all of that. Paste it again. And I will change before to after. And now the after 0 element is sitting on top of the before 10. Okay? I will just go right here in the after pseudo elements and I will add transform translate. And I want to translate it by minus 100% horizontally. So we'll move to the left. And I will translate it by 100% vertically. So it will move to the bottom. So now it should move 100% of its width to the left and 100% of its height to the bottom. Just like we see here. Grid. Now we have the before pseudo elements sitting on top of the link. And the after pseudo elements is in its new position. Let's keep moving on hovering. I want to before a pseudo element to move to the top right corner outside the link. And I want the after pseudo elements to take its place. This is easy to do. So I will just go right here. And when I hover over the link, I want to make some changes happen to the before pseudo element. I will add transform translate. I wanted to move to the right. So I will add 100% of its width to the right. And I want it to move to the top. So I will add minus 100% of its height to the top. And just like that, when I hover over the link, you can see the before pseudo element moves to this new position. Now, we want to make the after pseudo elements take its place. And this will be very easy to do. I will just copy that and change before to after. Then I will make both the translate X and the Translate Y 0 so that it will return to its original position. And now when I hover over the link, you can see the before pseudo element leads its place for the after pseudo element. Now, if you notice, you can see we still have the blue color of the link behind the before pseudo element. And it appears when we hover. So we can get rid of that no problem by just going back to the Links lecture and adding color transparent so that it will disappear. And I will add overflow hidden so that the elements don't appear outside the link. And now when we hover over the link, you can see it all looks exactly how we hoped. 3. 3 - animated button with css animation: Hello everyone. In this lesson we will learn how to create this link. So if you take a look, you can see we have a red background which has a specific width and takes up the full height of R link. And this background is skewed and is moving from left to right across the link. When I hover over the link, you can see that the red background will take up the full width. And when we hover away, it returns to moving from left to right. So how can we create this effect? Well, this is an easy 1. First, we will use the before pseudo elements to create the red background. And we will give it the full height of the link and a specific width, let's say 120 pixels. Then we will skew it a little Using the skew function. And we will apply an animation to it so that it will keep moving from left to right infinitely. Then when we hover over the link, we will make it so that it removes the skew function, starts the animation and makes it take up the full width of the link. So let's actually do that. Here in my HTML. I will start by going right here and adding a link. And inside of it, I will say hover me. Then I will go to my CSS to add some styles. I will add a dark gray background to the body. Then below that, I will target the anchor tag and add text decoration. None. Then color white. Font-family. San serif. Font size 40 pixels, border three pixels. Solid, white, padding, 40 pixels from top and bottom, and 80 pixels from the left and right. And finally, position relative. Now that the link is looking good, we need to create the red background using the before pseudo element. So I will go to my CSS and say a colon before. And I will make the content empty. Then I will make the background color red. Then I will say top 0, left 0 as well. Then width. Let's say 120 pixels and height, 100% when position absolute. And then when we look at it, you can see it has a red background, is taking up the full height of the link and has a width of 120 pixels. But you can see the letters are hidden beneath it. We can easily fix this by going back to the before pseudo element and adding z index minus one. And now you can see the text is appearing in front of it. Good. Now we want to skew it a little. So I will go back and add transform skew. And I will skew it by minus 15 degrees. And now you can see it's skewed nicely. Mike, we want, good. Now we want to create the animation that will make it move from left to right. So I will go right here and create a new animation name, moving, for example. And inside of it, I will say from and I want the red background to start from outside the link. So I will say left minus 120 pixels, which is the width of the red background. This way, it will start from outside the link. To make this idea clear, let's try going up here and changing left from 0 to minus 120 pixels. You can see is now located outside the link from the left. So this will be our starting point. And good. Now let's go back and make this 0 again. Then let's complete our animation. So I will go right here and say two left, 100%. So the red background movement will end at 100% of the link width to the left, meaning outside the link from the right edge. Great. Now let's add this animation to the red background. I will go up here and add animation. Then animation name moving. And animation duration 1.2 seconds, then linear, then finally infinite. And now you can see the red background is moving from left to right across the link. So k, Now we need to hide it outside the link. So I will go right here in the link selector and I will add overflow hidden. Alright, now, when hovering over the link, we want to start the animation, remove the skew and make the red background take the full width. So I will go right here. And when we hover over the link, I want to make some changes happened to the before pseudo element. So first of all, I will make the width 100%. So it takes up the full width of the link and then transform skew 0 degrees to make it return to its original shape. And finally, animation. None. To start the animation. Now we want these changes to happen smoothly. So I will go up here in the before pseudo element and I will add transition all 0.5. seconds. And now when I go and reload, you can see the red background will keep moving from left to right until I hover over the link and make it stop. At this point, it takes up the full width. And when I hover away and we'll continue moving again. 4. 4 - creative button hover effect 2: Hello everyone. Welcome to this lesson of the course. In this lesson, we will create this nice hover effect and we will use the before pseudo element to create it. So let's see how we can do that. I will start here in my HTML by adding a link. And I would just say hover me. Then I will go to my CSS to add some styles. I will target the link. When I will add text decoration. None. Color. This nice dark gray color. Font family. Sans serif. Font size 40 pixels, border, three pixels, solid. And our dark gray color. Then I will add padding, 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add transition or 0.5 seconds. And finally, position relative. And now our link is looking much better. Good. Now we will use the before pseudo elements to create our effect. So I will go right here and add a colon before. And I will add content. Hover me. Then position absolute, top, 0, left 0, then height, 100%, width, 100% as well. So it takes up the full width and height of the link. Then I will add background color, our dark gray color. And finally, color white. And now you can see the before pseudo element is set on top of the link with its dark gray background color. So now we want to send to the content inside the before pseudo element and we will use flanks box to do that. So I will go right here and add, display, flex, then justify content and align items Center as well. Great, so next we will do some work on our affect. The idea behind it is we will make this dark gray background scale up to about five times its original size. So it will be very huge. And we will make its opacity 0 so that it will be transparent. And when we hover over the link, we will make it scale back to one again, and the opacity will change to one as well. So it will be visible. Lets do that. I will go right here inside the before pseudo element, and I will add transform scale five times. And you can see it scale to five times its size and its huge. Now, I want it to be hidden outside the link. So I will go rank here inside the link selector, and I will add overflow hidden. And now you can see the parts of the before pseudo element outside the link or hidden. Awesome, let's keep going. Now. We need to make the before pseudo element transparent. So I will go right here and add opacity 0. And now you can see it's hidden. Then I will add transition all 0.5. seconds. Now I'm hovering. We want to make the scale of the pseudo element one again. And we also want to make it visible by making me opacity one. So let's do that. I will add a colon, hover, colon before. And inside of it, I will add transform, scale one when opacity one. And now when I go and hover over the link, you can see the before pseudo element appears and scales down to its original size, giving us the effect we wanted. 5. 5 - lighting text with css animation: Hello everyone. In this lesson we will create this nice lighting texts using CSS animations. So this is an infinite animation and the change that is happening here, because a change in color and text shadow. So let's actually do that. First of all, let's start by adding the markup of our HTML. So I will go right here inside the body, and I will add an unordered list. And inside of it, I will add a list items, and each list item will contain a letter. Good, now let's go to our CSS and add some styles. I will add a dark gray background color to the body. Then I will target the UL. And we will add margin 0, padding 0 as well. And we will add display flex so that all the list items will be displayed side-by-side. Cooh, Now let's add some style to the list letters themselves. So I will target the LI inside the UL. And I will add list-style and then color. And I will add a lighter gray color when font size 80 pixels. And finally, letter spacing 15 pixels to get some space between the letters. Great. Now let's create the lighting animation. I will go right here and create a new animation and name it lighting. And inside of it, I will say at 0% of the animation duration, I want the color to be the gray color. And I want the text shadow to be none. So nothing will change. When I will copy that, paste it again two times and just change 0% to 90%. Then at 100% of the animation duration, I will change the grey color to this yellow color. And I will add a text shadow right here. Now, before all this, I actually tried a lot of values until I figured out that I like this value. So now we want to add this animation to the letters. So I will go up here inside the list item selector and I will add animation. Then the animation name, lighting. When the animation duration 1.4 seconds, linear and infinite, of course. So what will happen here is from 0% to 90% of the 1.4 seconds, which is the animation duration. The letters won't change. Nothing will happen to them. But from 90% to 100% of the animation duration, the letters will be yellow and we'll have a text shadow. I made the change happen over a very short period of time to give it a feeling of lighting or a light bulb switching on and off quickly. But if the change happens slowly, it will look like lighting. It will be very smooth and boring. So let's actually see that. You can see the change is happening quickly, giving us the effect of lighting. But if we look at our demo, you can see the changes aren't all happening at the same time. The first letter lights up first, then the second, then the third, and so on and so forth. We can set that up by simply using the animation delay function. I will go back to my CSS and I will target the first child of a list items. And I will say UL LI nth child one. So what this will do is it will target the first list item in the UL, which is the first letter. Next, I will add animation delay 0 because I want the first letter to light up immediately. Then I will copy all of that. Paste it again, target the second letter this time and change the animation delay to 0.1 seconds. This way, it will wait 0.01. seconds before lighting up. Then I will do that for all the letters. And every time I will increase the animation delay by 0.1 seconds so that they will light up one after the other. Good. Now that I've added all the animation delays, let's take a look. You can see the first letter lights up first, then the second, and then the third, and so on, until the last letter when the animation starts again, because we made it infinite. 6. 6 - smoky text effect: Hello everyone. In this lesson we will create these creative smoky fading out effect for the text. So we will start here in our HTML, and I will add a UL. Then LI. And I will put every letter inside an LI. So I will add S right here. Then I will copy that and paste it again many times. And then I will add all the letters grade. So now let's add some styles. I'll go to my CSS and I will start by adding a dark gray background color to the body. Then I will target the UL. And I will add margin 0, padding 0 as well. Then I will add display flex so that all the letters will be displayed side by side, like so. Now we will target the list items which contain the letters. And I will add list-style none to get rid of these bullets. Then I will add color, white, then Font Size, 100 pixels, font-weight, bold, letter spacing, ten pixels. And finally, transition to seconds. And now the word is looking better. If we take a look at a demo, and if you look carefully at the movement of the letters, you can see that they are moving upward and rotating at the same time. So we will use the translate function to make the letters move upward and the rotate function to make them rotate obviously. So let's go to our CSS and when I hover over the UL, I want to make some changes happen to the ally. The first change is I want to add transform, rotate 45 degrees. Then a space. I also want the letters to be translated vertically on the y-axis by minus 200 pixels, so they will move upward. Now, when I hover over the UL, you can see the letters move upward and rotate at the same time. Now, I also want the opacity of the letters to be 0. So I will go right here and add opacity 0. And now when hovering again, the letters in that being transparent. Now in order to make this smoky or blurry effect, we can use a CSS property named filter. So I will go right here inside the list items and Add Filter Blur 20 pixels. So this is a CSS property that will make the tax blurry and give it this nice smoky effect. And the higher number you add here, the blurrier it will get. So now when I hover over our word, you can see we're getting exactly the effect we wanted. Now, one thing left. We don't want this effect to happen to all the letters at the same time. We want the first letter to disappear first, then the second, then the third, and so on. We can do this easily using the transition delay property, which will delay the occurrence of the transition. So what I will do is I will go right here and say LI colon, nth dash child, open parentheses, one, closed parenthesis. This will target the first child of the list items, which is the letter S. Next, I will copy this and paste it four times. And I will change the number every time. So two for the second letter, three for the third, four for the fourth, five for the fifth. Then I will go right here to the first letter and add transition delay 0 because we want it to disappear immediately. Then we will copy this and make it 0.4 seconds for the second letter. Then 0.8 seconds for the third, 1.2 seconds for the 4.6th, one seconds for the fifth. And now when I go and hover over the word, the letter should disappear one after the other. Like so. 7. 7 - heartbeat with css animation: Hello everyone. In this lesson we will learn how to create this heart in CSS and how to make it beat using CSS animation. This will be an interesting lesson. So let's see how we can do that. All right, I will start here in my HTML by adding a div and giving it a class of heart. Then I will go to my CSS. And I will start by adding a dark gray background color to the body. Then after that, I will target our div with the class of heart. And I will add some styles to it. I will start by adding position, relative. Then width, 100 pixels, height 100 pixels as well. Background color. The red color, of course. Good. Now you can see this is just a normal div with a red background. So let's continue working. I will go right here and I will use both the before and the after pseudo elements to create the heart. So I will start by the before pseudo element right here. And I would just make the content empty. Then I will add position, absolute, top 0, left 0 as well, the width 100% and height 100%. Then I will add background color. And let's add white for now. Good. Now you can see we've got the before pseudo element with a white background color sitting above our div with a class of heart. So what we need to do now is we need to make the white div moved toward the top by half of a tight. So I will go back to my CSS. And inside the before pseudo element, I will add transform translate. Why? Minus 50%. So now you can see the white div moves toward the top, a distance equal to half of a tight. Great. Now I will copy all of that. Paste it again. And I will just change before to after. And I will change the white background to, let say green. Now this time we want to move the after pseudo elements to the left, not toward the top. So I will just go right here and change Translate Y to translate X. Now you can see it moves to the left, a distance equal to half of its width. Good. Now, I will go right here in the div with the class of heart. And I will add transform, rotate, and I will rotate it by 45 degrees. So now you can see the div rotates by 45 degrees and both the before and after pseudo elements rotate with it. Now I think you're saying to yourself, Hey, we're almost there and that is right. All we need to do now to get the heart shape is go right here to the before pseudo element and add border radius 50%. Then I will do the same for the after. And now you can see we've got the heart shape we want. Let's go back and change the background color for both of them to read as well. Okay, now we have it. Next, we need to work on the animation to make this heart beat. Here is a slow demo of our animation so that we can see it better. I will reload the page. And you can see the heart stays still for awhile. Then it scales up. When scales down a little, then scales up again, then scales down to its original size, stays still for awhile. And then repeats the same process infinitely. So let's see how we can create that. I will go to my CSS, create a new animation and name it heart beat. When at the beginning of the animation at 0%, I will add transform. Rotate by 45 degrees to keep the heart rotated. Then scale by one because we wanted to start at its original size. Then I will copy all of that and paste it again five times. And I will add some percent intervals. So I will add 253050, 7100%. Good. So at 25%, I will keep the scale the same because remember, the heart stays still for awhile before the animation starts. So from 0% to 25% of the animation duration, I want the heart to stay static. Then at 30% of the animation duration, I will increase the scale to 1.4 times its original size so that the heart gets really big. Then at 50%, I will scale it down a little bit. So I will make it 1.2. And at 70%, I will scale it up again to 1.4. Then at 100% and wanted to scale it down to its original size, of course, so I will leave it like that. Now, we need to add this animation to our div. So I will go up here and add animation. Heartbeat. And the animation duration, more important for a seconds, linear and infinite, of course. And now you can see our heart is beating. If they still for awhile, then gets bigger, then a little smaller than bigger again, then returns to its original size, and so on and so forth. And that is exactly the effect we want.