Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
8 minutes to read | 12.22.2020
TL;DR On the modern web, clean subtle animations have taken over spinning logos and flashing headlines. We can accomplish animations with just CSS, no JavaScript. We can add one CSS property, transition, to our classes to allow an animation when the user takes an action, like hovering over an element. The only property required by transition is a duration in seconds, but there are other properties that will help you customize your transition even more. An example is: transition: 1s. In this example, the change happens over the course of one second.
Sign up for free to share your own content!
*
*
*
Animations can bring your website to life, as well as give your website design a touch of flair. Getting the right animations can be tricky, however. The time of flashing neon titles is over. No more spinning logos. No more changing the cursor into a spaceship. A more modern approach would be clean, subtle animations. Animations that only happen to certain elements. These animations will only happen in response to an action, like hovering over the element. We can accomplish animations with just CSS. No JavaScript needed. - Here’s how: We can use the CSS property transition to create elegant, start-to-finish animations when a user hovers over our element. Let’s learn about transition and how to use it to create hover animations. Using the transition CSS property Creating nice animations is actually way easier than you think. You don’t need to know JavaScript, and you barely need to know CSS. One property will do the trick - transition. transition works nicely and consistently in all modern browsers and operating systems, and can be used to change all sorts of properties like background, color, border, shadow, size, decoration, and lots more. Even though technically, we can accomplish the hover animation with just one CSS property, we may want to know a little more. It may just look like one CSS property, but it’s actually 4 different properties in one. Those properties are transition-property, transition-duration, transition-timing-function, and transition-delay. We are going to go over what each property does a little later. Each of these properties can be wrapped up into the transition property, like this: transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>; However, knowing that there are 4 properties that you can use, only one is required - transition-duration. A simple example is: transition: 2s;
transition: 2s;
Now, you just need to make sure these properties are on each CSS class you want to animate. For example:
stylesheet.css
.css-class { transition: 2s; } .css-class:hover { transition: 2s; }
If you are using some sort of preprocessor, creating a variable for this is extremely helpful and saves a lot of time. If you’re looking for an extremely simple CSS hover animation, that’s basically all you have to do to get it working, but there are ways to change how your animation behaves. Let’s see how we can customize the animation. transition-property A transition-property is the name of the CSS property that you are looking to animate. If you specify a transition-property only the properties defined will have the animations applied. The rest of the properties will change instantaneously like normal. For example, if you have a button, you could change the background color over the course of 1 second, but not apply an animation to the text color or border when a user hovers over the link.
transition-property: background;
If you leave transition-property blank, it will default to all properties specified in your CSS class. transition-duration The transition-duration is the amount of time the transition should take place over. Duration is the only property that is required for a transition. If you don’t include a duration, the default value is 0, which means nothing will happen. The duration is done using seconds (s). A few examples would be:
transition-duration: 0.3s;
transition-duration: 1s;
transition-duration: 3s;
transition-duration: 5s;
The top example will be the fastest as the transition is happening over only 0.3 seconds, whereas the bottom example will be the slowest because it happens over the course of 5 seconds. transition-timing-function A transition-timing-function is a property we can use to change how the transition takes place. For example, one timing function will start the transition off slow and end fast. Another will start slow, go fast in the middle, and end slow. Another will keep the transition perfectly smooth by using the same speed over time.
transition-timing-function: linear;
transition-timing-function: ease-in-out;
Some effects you can use are linear, ease, ease-in, ease-out, ease-in-out. transition-delay The transition-delay is how long the transition will take to start when the action is taken. Just like duration, we will be using seconds to calculate the delay. For example, we have a link we want our users to hover over. We can use transition-delay: 1s; to prevent our link from changing color for the first 1 second after the user hovers over it.
transition-delay: 1s;
Examples of different CSS hover animations Now that we have a slight grasp on what the transition property and all of its properties do, we can look at some examples of creating basic hover animations on links, buttons, and gradients. Links Links are probably the most basic element to animate as you usually only change a few properties. Things like color, text-decoration, maybe background. Here are a few examples of some links we use on the Ninth Digital Website Builder. ninth.digital | ninth.digital | ninth.digital | ninth.digital
stylesheet.css
.link-1 { transition: 0.5s; color: #fc9580; text-decoration: underline; text-underline-position: under; text-decoration-color: currentcolor; } .link-1:hover { transition: 0.5s; color: #80e7fc; } .link-2 { transition: 0.5s; color: #fc9580; border-bottom: 2px solid transparent; } .link-2:hover { transition: 0.5s; border-bottom: 2px solid #fc9580; } .link-3 { transition: 0.5s; color: #fdfdfd; background: #fc9580; } .link-3:hover { transition: 0.5s; background: #80e7fc; } .link-4 { transition: 0.3s; color: #fc9580; font-weight: 300; } .link-4:hover { transition: 0.3s; color: #80e7fc; font-weight: 700; }
Buttons Depending on the style of your button, there are probably a few more properties than with a link. With buttons it makes sense to change things like the background, color, border, box-shadow, height, width, etc… Here are a couple of different CSS buttons with hover animations: Submit | Submit | Submit | Submit
stylesheet.css
.button-1 { transition: 0.5s; background: #fc9580; border: 2px solid #dd8270; color: #fff2ef; } .button-1:hover { transition: 0.5s; background: #fff2ef; color: #fc9580; border: 2px solid #fc9580; } .button-2 { transition: 0.5s; background: #effcff; border: 2px solid #80e7fc; color: #80e7fc; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3); } .button-2:hover { transition: 0.3s; background: #80e7fc; color: #effcff; border: 2px solid #70cadd; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15); } .button-3 { transition: 0.5s; background: #fc9580; border: 2px solid #dd8270; color: #fff2ef; box-shadow: none; } .button-3:hover { transition: 0.5s; background: #fff2ef; color: #fc9580; border: 2px solid #fc9580; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3); } .button-4 { transition: 1s; background: #80e7fc; border: 2px solid #70cadd; color: #effcff; box-shadow: none; } .button-4:hover { transition: 0.5s; background: #fff2ef; color: #fc9580; border: 2px solid #fc9580; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3); }
Gradients Gradients are the hardest to create CSS hover animations for. They aren’t normal… yet. So we have to get a little hacky. Bummer. Instead of just being able to change our linear-gradient(), we have to mess around with the position of the background. Our plan is to create a background with linear-gradient(), increase the overall size of the background, and then move the position of the background when a user hovers over the element. Here’s an example: Submit
stylesheet.css
.button-5 { transition: 0.5s; background-image: linear-gradient(135deg, #80e7fc, #fc9580); background-size: 300% 100%; border: 2px solid #80e7fc; color: #fff2ef; } .button-5:hover { transition: 0.5s; background-position: 100% 0; border: 2px solid #fc9580; }
Summarize Creating basic hover animations for links, buttons, and backgrounds is super easy using the CSS transition property. Remember that you need to include the property on all CSS classes that you want to animate. transition-duration in seconds is the only property that is required, but you can customize transitions even further by including transition-property, transition-timing-function, or transition-delay. Perfect! You now know how to make clean, subtle animations for your website.
Share this with your friends
Recent Posts
What is the best word count for a blog post to rank high in Google?
What is the best word count for a blog post to rank high in Google?
Internet Marketing | 2 minutes to read | 01.08.2021
Part of SEO and ranking high in the search engine results is word count. Should your blog posts be short? Medium? Long? What's the optimal word count for blog posts?
Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
Web Design | 8 minutes to read | 12.22.2020
Animations can bring your website to life, as well as give your design a touch of flair, but we don't want them to be crazy. Here's how to make basic hover animations with CSS.
View all posts