HTML+CSS to achieve cyberpunk style button

First look at the effect:

insert image description here

Preface:

I came up with this idea after seeing the up-loader Steven on Bilibili. I thought it was great, so I made one myself. (pure CSS), the following is the detailed process. There is a complete code at the end.

accomplish:

1. First, define a div tag as a button with a class name of .anniu:

 <div class="anniu">Aurora Borealis night</div>

2. .anniu's basic CSS style, length, width, font size, etc.:

.anniu,.anniu::after{
           font-family: 'Do Hyeon', sans-serif;
           width: 260px;
           height: 80px;
           text-align: center;
           font-size: 22px;
           line-height: 80px;
           color: rgb(255, 251, 251);
           background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
           box-shadow: 5px 0 0 rgb(0, 204, 255);
           cursor: pointer;
           position: relative;
       }

font-family: 'Do Hyeon', sans-serif; represents the font. You can go to this website, which has many types of fonts.
background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
Cleverly use the background color to create the shape with the cut corners. This statement means that the gradient color starts at an angle of 30 degrees, 0 to 10% displays transparent color, 10% to 95% displays orange, and 95% to 100% displays green.
box-shadow: 5px 0 0 rgb(0, 204, 255); represents the blue shadow on the right.
cursor: pointer; means that the arrow changes to a small hand when the mouse passes over it.

3. Define a double pseudo-class that looks exactly like .anniu, and cover .anniu through absolute positioning. The same basic style has been defined in the union selector of .anniu in step 2. Add the following style:

.anniu::after{
           content: 'Aurora Borealis night';
           position: absolute;
           top: 0;
           left: 0;
           text-shadow: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           visibility: hidden;
          
       }

text-shadow: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115); represents the shadow of the font, so that the font has a shadow of rgb(0, 183, 255) and rgb(0, 255, 115) color in the upper left and lower right respectively.
visibility: hidden; means hiding this pseudo-class.

4. Use the clip-path: inset() property to clip the area and transform: translate(); to offset the effect once;
The specific meaning is as follows:
clip-path: inset() means that you can use clipping to create a displayable area (rectangle) of the element, so that the part inside the area is displayed and the part outside the area is hidden.
transform: translate() means moving;

For example, clipping the double pseudo-class: clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）; the result is as follows

insert image description here

(20% -5px 60% 0); means the cropping pseudo class crops 20% from top to bottom, crops -5px from right to left (negative because it is necessary to display the shadow), crops 60% from bottom to top, and crops 0% from left to right. In this way, only a rectangular part with a height of 20% and a width of 5px will be left. The rest of the cropped edges will be hidden. At the same time, set translate() to offset it a little to the left to achieve the above effect.

Next, crop the pseudo-class effect three more times.
clip-path: inset(50% -5px 30% 0); gets:

insert image description here

clip-path: inset(80% -5px 5% 0); gets:

insert image description here

clip-path: inset(0 -5px 80% 0); gets:

insert image description here

5. After the cropping effect in the fourth step, we can set the animation. When the mouse passes over, different cropping effects and offset effects of the pseudo-class will be displayed. The cropping position and offset position can be set according to your own feeling.

 .anniu:hover::after{
           animation: san 1s ; 
           animation-timing-function: steps(1, end);
       }

 @keyframes san{
           0%{
            clip-path: inset(20% -5px 60% 0);
            transform: translate(-6px,5px);
            visibility: visible;
           }
           10%
            clip-path: inset(50% -5px 30% 0);
            transform: translate(6px,-5px);
           }
           20%
            clip-path: inset(20% -5px 60% 0);
            transform: translate(5px,0px);

            }
            30%
                clip-path: inset(80% -5px 5% 0);
            transform: translate(-8px,5px);
            }
            40%
                clip-path: inset(0 -5px 80% 0);
            transform: translate(-4px,-3px);

            }
            50%{
                clip-path: inset(50% -5px 30% 0);
            transform: translate(-6px,-5px);
            }
            60%
                clip-path: inset(80% -5px 5% 0);
            transform: translate(-7px,5px);

            }
            70%
                clip-path: inset(0 -5px 80% 0);
            transform: translate(3px,6px);
            }
            80%
                clip-path: inset(50% -5px 30% 0);
            transform: translate(5px,5px);

            }
            90%
                clip-path: inset(20% -5px 60% 0);
            transform: translate(6px,-5px);

            }
            100%{
                clip-path: inset(0 -5px 80% 0);
            transform: translate(1px,5px);

            }
       }

visibility: visible; makes the pseudo-class visible.
animation-timing-function: steps(1, end); 1 means 0% to 10%, 10% to 20%, ... only one frame is used between them. If you write 2, it will be two frames. Only one frame is used to achieve a better stuttering effect. end indicates that the first frame is the beginning of the first step of animation. If it is start, it means the first frame is the end of the first step of animation.

Full code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: rgb(243, 239, 8);
       }
       .anniu,.anniu::after{
           font-family: 'Do Hyeon', sans-serif;
           width: 260px;
           height: 80px;
           text-align: center;
           font-size: 22px;
           line-height: 80px;
           color: rgb(255, 251, 251);
           background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
           box-shadow: 5px 0 0 rgb(0, 204, 255);
           cursor: pointer;
           position: relative;
       }
       .anniu::after{
           content: 'Aurora Borealis night';
           position: absolute;
           top: 0;
           left: 0;
           text-shadow: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           visibility: hidden;
          
       } 
       .anniu:hover::after{
           animation: san 1s ; 
           animation-timing-function: steps(1, end);
       }

       /* 
       
       clip-path: inset(20% -5px 60% 0);
       clip-path: inset(50% -5px 30% 0);
       clip-path: inset(80% -5px 5% 0);
       clip-path: inset(0 -5px 80% 0);
       
       
        */
       @keyframes san{
           0%{
            clip-path: inset(20% -5px 60% 0);
            transform: translate(-6px,5px);
            visibility: visible;
           }
           10%
            clip-path: inset(50% -5px 30% 0);
            transform: translate(6px,-5px);
           }
           20%
            clip-path: inset(20% -5px 60% 0);
            transform: translate(5px,0px);

            }
            30%
                clip-path: inset(80% -5px 5% 0);
            transform: translate(-8px,5px);
            }
            40%
                clip-path: inset(0 -5px 80% 0);
            transform: translate(-4px,-3px);

            }
            50%{
                clip-path: inset(50% -5px 30% 0);
            transform: translate(-6px,-5px);
            }
            60%
                clip-path: inset(80% -5px 5% 0);
            transform: translate(-7px,5px);

            }
            70%
                clip-path: inset(0 -5px 80% 0);
            transform: translate(3px,6px);
            }
            80%
                clip-path: inset(50% -5px 30% 0);
            transform: translate(5px,5px);

            }
            90%
                clip-path: inset(20% -5px 60% 0);
            transform: translate(6px,-5px);

            }
            100%{
                clip-path: inset(0 -5px 80% 0);
            transform: translate(1px,5px);

            }
       }
    </style>
</head>
<body>
    <div class="anniu">Aurora Borealis night</div>
</body>
</html>

This is the end of this article about how to implement cyberpunk style buttons with html+css. For more relevant html+css cyberpunk style buttons content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: HTML+CSS to create heartbeat special effects

>>: HTML+CSS to achieve layered pyramid example