Use CSS background to achieve cool hover effects

In the daily development process, you will encounter a lot of button mouseover effects. There are many ways to achieve such hover effects. With the help of pseudo-elements, CSS3 transformations and transitions can be achieved. Today's article will use background colors to achieve a similar effect, when we have a problem and you have more than one solution in mind, I think it must be excellent, using different methods to achieve the same effect, or The problem encountered one day is solved.

The mouse hover effect mainly implemented today is shown in the following GIF.

Hover effect one

The effect code shown in the figure above is shown below. It only takes 4 lines of code to achieve the effect. Are you surprised that the code is so streamlined? Next, I will explain in detail how it is done.

 .hover-1 {
  background: linear-gradient(#1095c1 0 0) var(--p, 0) / var(--p, 0) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
  color: #fff;
}

First, we start with a simple background-size transition, as shown above, the height of the background color is always kept at 100%, we only need to change its width from 0% to 100%. Because background-size is used to change the width, background-image: linear-gradient is used to set the background color. Since there is only one color value, use this #1095c1 0 0 shorthand method, there is no need to write two color values.

 background-image: linear-gradient(#1095c1 0 0);

When using background-size, we can omit the height because by default the gradient is full height. We use background-size: 0 to transition to background-size: 100% .

 .hover-1 {
  background-size: 0;
}
.hover-1:hover {
  background-size: 100%;
}

Further optimization, introducing a custom property to avoid duplication of background-size , --p was not initially defined, so 0% will be used. On hover, we define --p to replace the initial value of ---69308cde4a2f989fb04f12d78da8eed4 100% with 0%

 .hover-1 {
  background-size: var(--p, 0%);
}
.hover-1:hover {
  --p: 100%;
}

So far our effect is as follows

Next, introduce background-position to achieve the effect of reversal. Looking at the first GIF image, it can be done in 2 steps.

• The background increases in size from right to left on mouseover
• The background is reduced in size from left to right when the mouse is moved out

And can not add transition transition animation when hovering, this attribute needs to take effect in time, so background-position 0s is added.

 .hover-1 {
  background-position: left;
  transition: .4s,background-position 0s;
}
.hover-1:hover {
  --p: 100%;
  background-position: right;
}

It can be further optimized, the value of background-position uses percentage.

 .hover-1 {
  background-position: 0%;
  transition: .4s,background-position 0s;
}
.hover-1:hover {
  --p: 100%;
  background-position: 100%;
}

You may have discovered that the two values when hovering are both 100%, so we can further optimize using custom attributes --p .

 .hover-1 {
  background: linear-gradient(#1095c1 0 0) no-repeat;
  transition: .4s,background-position 0s;
  background-size: var(--p, 0%);
  background-position: var(--p, 0%);
}
.hover-1:hover {
  --p: 100%;
}

background we use compound writing method to further simplify the code, use / for segmentation, the front is background-position the latter is background-size

 .hover-1 {
  background: linear-gradient(#1095c1 0 0) var(--p, 0%) / var(--p,0%) no-repeat;
  transition: .4s, background-position 0s;
}
.hover-1:hover {
  --p: 100%;
}

At this point, the hover effect is completely implemented, and the code is simplified. Based on this design, you can also slightly change the code to make the hover effect achieve the opposite effect. Modify background-position from 100% to 0%, instead of 0% to 100% above. In order to keep the --p custom attributes unchanged, we use the calc() function to process.

 background: linear-gradient(#1095c1 0 0) calc(100% - var(--p,0%)) / var(--p,0%) no-repeat;

Hover effect two

As shown in the figure above, the first effect is more complicated, and the whole effect is composed of multiple animation steps. The initial background area is outside the visible area, move from left to right to cover the bottom of the entire element, then change the background color to the height to 100% cover the entire element.

Here you need to use the percentage usage of background-position . If you don't understand its usage, you can read the reference article at the end of the article. The trick is to change the width to 200%, but don't worry about the overflow after the background color is exceeded. The background color that overflows from the element is hidden. The code is as follows.

 .hover-2 {
  background-image: linear-gradient(#1095c1 0 0);
  background-size: 200% .08em;
  background-position: 200% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
.hover-2:hover {
  transition: background-size .3s .3s, background-position .3s;
  background-size: 200% 100%;
  background-position: 100% 100%;
}

Then continue to optimize the code, first use the compound writing method of background to simplify and reduce additional declarations.

 .hover-2 {
  background: 
    linear-gradient(#1095c1 0 0) no-repeat
    var(--p, 200%) 100% / 200% var(--p, .08em);
  transition: .3s var(--t, 0s), background-position .3s calc(.3s - var(--t, 0s));
}
.hover-2:hover {
  --p: 100%;
  --t: .3s;
}

Here we add a custom variable --t , when the mouse hovers, we set it to .3s, the final code is as follows:

 transition: .3s .3s, background-position .3s 0s;

When the mouse is moved out, --t is undefined, and the final code is as follows:

 transition: .3s 0s, background-position .3s .3s;

So far, two variables have been declared when the mouse is hovered. We can further optimize and update multiple attributes through one attribute. For how to generate such code, see the reference link at the end of the article. The final code is modified as follows:

 .hover-2 {
  background: 
    linear-gradient(#1095c1 0 0) no-repeat
    calc(200% - var(--i, 0) * 100%) 100% / 200% calc(100% * var(--i, 0) + .08em);
  transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - calc(var(--i, 0) * .3s));
}
.hover-2:hover {
  --i: 1;
}

--i the end, if it is undefined, it will be 0, and it will be updated to 1 when hovering. This variable is like a switch variable in JS. So far, the whole effect only needs three lines of CSS declaration to complete.

Hover effect three

This effect is extended to two gradient animation effects on the basis of effect 2. Initially, there will be two gradient overflow elements, which are not in the field of view by default, and the width of each is half of the entire element. When we move the mouse in, modify the two overflowing elements to the visible area, the first gradient is located in the lower left corner, the second gradient is located in the upper right corner, and finally the height is increased to cover the entire element.

The initial CSS code is as follows, which is almost the same as the code of effect 2, the only difference is that there are two different positions to animate at the same time, and the percentage background-position is also used here.

 .hover-3 {
  background-image:
    linear-gradient(#1095c1 0 0),
    linear-gradient(#1095c1 0 0);
  background-repeat: no-repeat;
  background-size: 50% .08em;
  background-position:
    -100% 100%,
    200% 0;
  transition: background-size .3s, background-position .3s .3s;
}
.hover-3:hover {
  background-size: 50% 100%;
  background-position:
    0 100%,
    100% 0;  
  transition: background-size .3s .3s, background-position .3s;
}

Next, start optimizing the code, background compound writing, custom attributes and calc() are further organized, an additional --c custom attribute is added here, because in background Used twice.

 .hover-3 {
  --c: no-repeat linear-gradient(#1095c1 0 0);
  background: 
    var(--c) calc(-100% + var(--p, 0%)) 100% / 50% var(--p, .08em),
    var(--c) calc( 200% - var(--p, 0%)) 0    / 50% var(--p, .08em);
  transition: .3s var(--t, 0s), background-position .3s calc(.3s - var(--t, 0s));
}
.hover-3:hover {
  --p: 100%;
  --t: 0.3s;
}

Next, use switch variables to further optimize, there is only one variable --i

 .hover-3 {
  --c: no-repeat linear-gradient(#1095c1 0 0);
  background: 
    var(--c) calc(-100% + var(--i, 0) * 100%) 100% / 50% calc(100% * var(--i, 0) + .08em),
    var(--c) calc( 200% - var(--i, 0) * 100%) 0 / 50% calc(100% * var(--i, 0) + .08em);
  transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
}
.hover-3:hover {
  --i: 1;
}

Hover effect four

This effect is more difficult than the above, and uses more cone gradients and more calculations. It can be mainly divided into the following steps:

1. There are two left and right cone gradients outside the element's visible area
2. Mouse-in increases the width of the two cone gradients until they cover the element
3. Change the position of the entire background area, this is also the most important step
4. The changed position, because the two cone gradients are the same color, there is no visual change
5. Move the mouse out to reduce the width of the cone gradient, you can see the animation after contrast

Both gradients need to have a default width of 0 and twice the height of the element (0% 200%). The configuration of each gradient is shown below:

 background-image:
    conic-gradient(from -135deg at 100%  50%, var(--c) 90deg, #0000 0),
    conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0);

Visually, each gradient is half the width of the element, but it's actually more than that, because of the tapered gap. Therefore, it is necessary to add a certain value on the basis of half the width. This value can be larger to cover the entire element.

 .hover-4:hover {
  background-size: calc(50% + .6em) 200%;
}

The optimized code is as follows:

 .hover-4 {
  --c: #1095c1;
  line-height: 1.2em;
  background:
    conic-gradient(from -135deg at 100%  50%, var(--c) 90deg, #0000 0) 
      0  var(--p, 0%) / var(--s, 0%) 200% no-repeat,
    conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0) 
      100% var(--p, 0%) / var(--s, 0%) 200% no-repeat;
  transition: .4s, background-position 0s;
}
.hover-4:hover {
  --p: 100%;
  --s: calc(50% + .6em);
}

Summarize

A total of four hover effects are analyzed above. Although the effects are different, they mainly use CSS background attributes, custom attributes and calc() . Different combinations produce different effects. , but the final code is all similar, resulting in extremely concise and maintainable code. Based on this, this is just the tip of the iceberg, the power of modern CSS can also produce all kinds of magical effects. Do you have an idea to try?

At the end, if you find it useful, like, follow, and bookmark it, maybe you will use it someday~

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)

refer to

background-position uses percentage values

dry-switching-with-css-variables-the-difference-of-one-declaration

using-percentage-values-with-background-position-on-a-linear-gradient

cool-hover-effects-using-background-properties