Pure CSS to achieve beautiful buttons

I encountered a demand in recent work-to implement some cool buttons. After seeing the renderings, the buttons are really beautiful, with bounce, color gradient, sweeping, and neon lights, which instantly aroused my curiosity and started the research and implementation. the road. (Welcome to pay attention to the front-end point, line and surface of the

1. Basic Reserve

The realization of these beautiful buttons mainly uses some CSS properties, mainly animation, background-size, background-position, linear-gradient(). The following is a brief overview of these four contents.

1.1 animation

animation attribute is used to specify one or more groups of animations. Each group is separated by a comma. The syntax is as follows. For detailed usage, please refer to MDN :

animation: name duration timing-function delay iteration-count direction;

1.2 background-size

background-size sets the background image size. The picture can keep its original size, or stretch to a new size, or zoom to the size of the available space of the element while maintaining its original proportions. The syntax is as follows. For detailed usage, please refer to MDN :

background-size: length|percentage|cover|contain;

1.3 background-position

background-position sets the initial position for each background image. This position is relative to background-origin . For detailed usage, please refer to MDN .

There is a position you must pay special attention to when using this attribute, otherwise it is difficult to understand why the position specified by the background-position is different from what you want. This position is the calculation formula for the percentage. You can understand the percentage setting by the following formula What is the result of the background image:

background-postion:x y;
x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

1.4 linear-gradient

linear-gradient() function is used to create a picture that represents a linear gradient of two or more colors. The result belongs to the <gradient> data type, which is a special <image> data type, the syntax is as follows, detailed usage can refer to MDN ):

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Second, the effect is achieved

The following four animation effects are actually achieved by making full use of CSS properties. Let's take a look at how to achieve them in detail.

2.1 Bounce effect

The first effect is the bouncing effect. The so-called bouncing effect is that the button changes between sizes. The idea is as follows:

1. Create a static button;
2. Then use the animation property to create an animation. When the transformation reaches 50%, the button transforms to 1.2 times, and when the animation reaches 100%, the button returns to its original state.

<div class="button1">
    <span>立即下载</span>
</div>

.button1 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    animation: zoomIn 1.5s infinite;
    text-align: center;
}
@keyframes zoomIn {
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

2.2 Color gradient effect

The second is the color gradient effect. The so-called color gradient effect is that the color changes from one color to another, and then loops like this. The idea is as follows:

1. Create a static button;
2. Add a symmetrical background color with a gradient color;
3. The background color is stretched to 200% in the x-axis direction, so that the background color at the original symmetry axis can be moved from the middle to the right;
4. Finally, use animation to realize the animation of the operating position, and simulate the animation of continuous color gradation.

<div class="button2">
    <span>立即下载</span>
</div>

.button2 {
    display: inline-block;
    width: 200px;
    height: 46px;
    line-height: 46px;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    text-align: center;
    background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);
    background-size: 200%;
    animation: colorGradient 1.5s infinite;
}

@keyframes colorGradient {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

2.3 Sweeping effect

The third is the sweeping effect. The so-called sweeping refers to the continuous scanning of a white transparent color from one end to the other. The idea is as follows:

1. Create a static button;
2. Use the ::before pseudo-element in front of the static button, set the background color of the element to a white and slightly transparent color, and move the center position to the right side of the container by zooming;
3. Use animation to achieve animation, and constantly change the position to achieve the sweeping effect.

<div class="button3">
    <span>立即下载</span>
</div>

.button3 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background-color: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    border-radius: 27px;
    position: relative;
}
.button3::before {
    content: "";
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 200%;
    animation: wipes 1s infinite;
}
@keyframes wipes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

2.4 Neon effect

The fourth type is the neon light effect. The so-called neon light effect is actually more like a slash moving continuously. The principle is as follows:

1. Create a static button;
2. Use the ::before pseudo-element in front of the static button to set the background color of the element to a slanted neon light effect. This effect is achieved by creating a 20px * 20px square background, and then using linear-gradient to tilt the background color in a 135° direction gradient , Realize the neon light of small return, and then continuously repeat through the background to realize the whole effect;
3. Use animation to achieve animation, and constantly change the position to achieve the neon light effect.

<div class="button4">
    <span>立即下载</span>
</div>

.button4 {
    width: 200px;
    height: 46px;
    line-height: 46px;
    background: #2e82ff;
    color: #ffffff;
    font-size: 18px;
    border-radius: 27px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.button4:before {
    content: "";
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: 20px 20px;
    background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.1) 75%,rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);
    animation: moveblock 0.5s linear infinite;
}
@keyframes moveblock{
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 20px 0px;
    }
}

1. If you think this article is good, share it, like it, and let more people see it

2. Welcome to pay attention to the front-end point, line and surface of the official account. The pdf version of "Front-end Hundred Questions" is waiting for you. If you happen to be in an interview, you can send your resume to me for free.