advanced CSS animations: make 4 cool buttons effects, a text rotator and an animated image pattern! | Ahmed Sadek | Skillshare

advanced CSS animations: make 4 cool buttons effects, a text rotator and an animated image pattern!

Ahmed Sadek, full stack web developer, freelancer & t

advanced CSS animations: make 4 cool buttons effects, a text rotator and an animated image pattern!

Ahmed Sadek, full stack web developer, freelancer & t

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

      1:50
    • 2. 2 - button hover effect 1

      2:31
    • 3. 3 - text rotator using css animations

      2:41
    • 4. 4 - button hover effect 2

      2:44
    • 5. 5 - animated image pattern using css animations

      3:46
    • 6. 6 - button hover effect 2

      5:10
    • 7. 7 - button shaking hover effect with css animation

      3:54
  • --
  • 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.

9

Students

--

Projects

About This Class

in this class of the CSS animations series we are going to create 4 cool buttons hover effects, we will also learn how to create a text rotator and an animated image pattern using pure CSS with no javascript added, i hope you will enjoy this class! 

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 create: Hello everyone. This is your instructor, Ahmed Sadat, a full-stack web developer and designer. And I want to welcome you to this new class of CSS animations examples. So let's see what we are going to create in this lesson. First, we will create this nice button hover effect in this animation. When we hover over this button, you can see that the button gets stretched and the tax gets Boulder at the same time. Then we will learn how to create this text rotator animation. As you can see, the third word constantly changes on its own. We will learn how to make that happen. Then we will move on to another button hover effect. As you can see in this animation, when we hover over this button, this Wipe effect happens, and when we move away, it disappears. After that, we will create this nice animated background pattern. You can see that this image pattern constantly repeats itself. We will make that using pure CSS with no JavaScript. Then we will move on to another really cool button hover effect. As you can see, this effect happens when we hover over the button. Then finally, we will create this button shaking hover effect. As you can see when we hover over the button, this shaking effect happens. So we will learn how to create that. But, and this is very important. Before watching this class, you should be familiar with CSS, transitions, transforms, and animation basics. If you feel uncomfortable with any of those, you can check out my other classes where I teach the basics of these topics. Those classes are the CSS transitions and transforms masterclass and the CSS animations masterclass. 2. 2 - button hover effect 1: Hello everyone. In this lesson, we will create this nice hover effect. You can see when I hover over the link, the text becomes bolder and both the letter spacing and the border thickness increase. This is an easy but nice-looking effect. So let's see how we can do it. Here in my HTML, you can see I have implemented a font from Google Fonts named roberto in this example. So I will go right here and add an anchor tag. And I would just say button. Then I will go to my CSS to add some styles. I will target the anchor tag and add text decoration. None. Padding, 40 pixels from top and bottom, and 80 pixels from left and right. Then I will add color. This nice red color and border, three pixels, solid. And our red color. Then I will add text transform. Uppercase, font size 40 pixels. And font-family. Roberto. Then font-weight 300, which will make it a little lighter. Then letter spacing minus two pixels so that the letters will be closer to each other. And finally, transition or 0.5. seconds so that the change occurs smoothly. And now you can see the link is looking exactly like our demo. Now we need to create the effect we want on hovering. So I will target the link and on hovering, I will change the font weight to 900, so it will be much bolder. Then I will add letter spacing ten pixels so that the letters will be a little far away from each other. And then I will copy the border from up here and paste it. And I will change this to seven pixels instead of three pixels. And that's it. When I hover over the link, you can see the change is nice and smooth, just how we want. 3. 3 - text rotator using css animations: Hello everyone. In this lesson, we will learn how to create this tax rotator using CSS animations, and keyframes. All right, so here in my HTML, I will add H one. And inside of it, I will say I love CSS. Then I will add an empty span. So this span will contain the different words that will change which our animation transition and transforms. But we will add them using CSS. Now, let's go to our CSS. You can see here I've added some style to the body in order to center the H1 horizontally and vertically. I've also added this background color to a body. Great. Now let's target the H1 and add color. White. Then font size 50 pixels. Then I will target the span. And we will use the before pseudo element to add the content we want. So I will say content transitions first of all. And here it is. Then I will add text transform uppercase. When font-family, Arial. And color will be this nice blue color. Now, we want to change the word transitions. We can do this no problem by creating a new animation and naming it word switch. For example. When at 0%, I will set the content to transitions. When at 50%. I will set it to animations. And that 100%, I will set it to Transforms. And now let's go up here and add animation. Word switch. Five seconds, infinite. So now what will happen is this content will change from transitions to animations, to transforms over a period of five seconds. And that will go on forever because we set the animation iteration count to infinite. 4. 4 - button hover effect 2: Hello everyone. In this lesson, we will create this nice swipe effect from top to bottom. And if you notice, this effect is very similar to what we created in the previous lesson. The main difference is that here we have content in the pseudo element, which is the word year. And of course there are some differences in how the buttons look, but we will use the same files from the previous example and make some changes to give this effect. So here is the HTML from the previous example, and we won't change anything in it at all. The changes will be in our CSS. So let's go to our CSS. And before doing anything else, let's just change what the link will look like. So the first thing I will do is I will add a nice dark gray background to the body. And then after that, I will make some changes to the link. So I will change the color to white. The font families, good. The font size is fine. And here I will change the border color to white as well. And that's it for the link itself. Now, we need to add it the before pseudo element. So in this example, we need to add content right here. So I will type Year and I will add color white. And I will also change the background color to this red color. And now when I hover over the link, you can see the word Year appears behind the link text. This happens because the Z index is set to minus one right here. So I will remove this. And now when I hover over the link, you can see the word Yeah, appears in front of the button. Great, so now we need to center our word in the background. This is very easy using flexbox. So I will just go right here and add display flex so that we control anything that's in this pseudo element using flexbox. And I will add a line items centre to centre the content vertically and justify content Center as well to center it horizontally. So now when I hover over the button, you can see the Word is now perfectly centered inside the pseudo element. 5. 5 - animated image pattern using css animations: Hello everyone. In this lesson, we will learn how to create this animated background pattern using CSS animations, and keyframes. So let's do that. Here in my HTML, I will added div and give it a class of banner. Then I will go to my CSS and target that div with the class of banner. And I will add height 100 vh, so it takes up the full height of the browser. Then I will add the background image. So I will say background URL, and I will add our image. Then I will add background position 00 so that the image position will be the top left. And when we view that in the browser, you can see we have our pattern image and it's repeated. But because it's a pattern and other parts of the image look exactly the same. We're seeing it as if it's taking up the full width and height. But that's not true. The image is actually repeated vertically and horizontally. So we are actually seeing many repeated images right now, not one single image. Now the idea behind the animated background pattern is we animate the change in the background position from 0 at the left and 0 at the top to 0 at the left. And the number of pixels equal to the image height at the top. So I will go to my CSS and I will create a new animation and name it animated pattern. And I will say from background position 002, background position 0 from the left, and 600 pixels from the top. Now I've added 600 pixels right here, because the pattern height is 600 pixels. So if you want the pattern to move vertically, you should make the background position 600 pixels from the top grade. Now I will go up here and say animation, animated pattern. 15 seconds, linear and infinite, of course. And now when I go and reload my browser, you can see the image is now moving vertically until it moves 600 pixels, which is the end of one image, in the beginning of another, and then moves another 600 pixels and so on and so forth. Now, it's really easy to make the pattern move horizontally. So I will go to my CSS and make this 600 pixels 0 so that it won't move vertically. Then I will add 800 pixels from the left. And I added 800 pixels because it's the width of my image. My image is 600 pixels by 800 pixels. And now when I go to the browser and reload, you can see the background image is moving horizontally. And of course we can make it move horizontally and vertically at the same time by going back to my CSS and changing this 0 back to 600 pixels again. And now you can see the pattern is moving horizontally and vertically. At the same time. 6. 6 - button hover effect 2: Hello everyone. In this lesson, we will create this effect when hovering over a button. So let's view that in a slower demo to see what exactly is going on, I will hover over the link. And you can see that the background color is changing to some red colour. And there is a thick white line that is tilted at a 45 degree angle and it's passing across the link. At the same time the background color changes. Cool, right? So let's see how we can do this. First of all, I will go to my HTML and I will add an anchor tag. And just say hovering 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 the top and bottom, and 80 pixels from the left and right. Then I will add transition, 0.30 seconds position relative. And next, let's make the background color change to read when hovering over the link. So I will go right here and say a. And on hovering. I will change the background color to our red color. And now when I hover over the link, you can see that the background color changes to read. Good. Now we want to create a thick white line that crosses the link. And we will use the before pseudo element for that. 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 white. Then I will say top 0, left 0 as well. Then width 100%, and height 50 pixels, then position absolute. And then when we take a look at it, you can see it's got a white background taking up the full width of the link and having a high of 50 pixels. Now, we want to move it to the left outside the link so that when I hover over it, it moves from left to right. So I will go right here and add transform, translate X minus 100%. And now you can see it's translated outside the link to the left by a distance equal to 100% of its width. Next, I want to rotate it by 45 degrees because it's rotated and I demo. So I will go right here and add another transform function which is rotate 45 degrees. And now you can see it's rotated. Good. Now we want to make it move to the right all the way across the link when we hover over it. And this can be done, no problem. So I will go to my CSS and when hovering over the link, I want to make some changes happened to the before pseudo element. I will add transform translate X 100% so that it moves to the right by 100% of its width. Then rotate 45 degrees. So it will stay rotated during the movement. And now when I hover over the link, you can see the before pseudo element is moving from left to right passing across the link. But we still have a small problem. And that is getting rid of the pseudo element outside the link. We can fix that no problem by going to the anchor tag selector and adding overflow hidden so that anything outside it will be hidden. And now when I hover over the link, you can see we are getting the exact effect we want. 7. 7 - button shaking hover effect with css animation: Hello everyone. In this lesson we will create these nails shaking hover effect for our button. And of course, we'll be using CSS animation to do it. So before we begin, we wanted to see how this shaking effect is working. Here in this demo, I've made the animation duration very high so that we can see exactly what is happening. So when I hover over the link, you can see it rotates a little bit to the right, then a little bit to the left, then a little bit to the right again, and then finally returns to its original position. So this should be very easy to do. Alright, let's do this. I will go to my HTML and I will add an anchor tag and just say hover me. Then I will go to my CSS and add some styles. I will add some 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 the top and bottom, and 80 pixels from the left and right. Then I will add transition or 0.3 seconds. Then when I hover over the link, I want the color and the border color as well to change. So I will copy this line of code, paste it here, and I will change the white color to this red color. Then after that, I will also change the color itself to read instead of light. So now when I go and hover over the link, you can see the border color and text color change. Now we want to create the shaking affect. What I'm going to do is I'm going to go right here and create a new animation. And I will name it, shake. And inside of it, I will say at 33% of the animation duration, I want the link to be rotated by ten degrees to the right. And after 66% of the animation, I want it to be rotated to the left by ten degrees as well. So we will use minus ten this time. And at 100% of the animation duration and wanted to be rotated to the right again by ten degrees. So what will happen here is the button will be rotated to the right, then to the left, then to the right, before it comes back to its original place. Great. Now let's add this animation to our button on hovering. We'll go right here and add animation. Then animation name, shake, and animation duration 0.3 seconds, then linear. And finally, the animation iteration count only one time when Hungary. And now when I go and hover over the button, you can see the shaking effect is happening to the right, then to the left, then to the right again, and then returns to its starting position. And that is exactly the effect we want.