HTML+CSS to achieve cyberpunk style button

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

Recommend

MySQL SQL statement performance tuning simple example

MySQL SQL statement performance tuning simple exa...

MySQL database 8 - detailed explanation of the application of functions in the database

Use of built-in functions in the database This ar...

A quick guide to Docker

Docker provides a way to automatically deploy sof...

How to install Linux flash

How to install flash in Linux 1. Visit the flash ...

WeChat applet implements form verification

WeChat applet form validation, for your reference...

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...

Detailed explanation of CSS sticky positioning position: sticky problem pit

Preface: position:sticky is a new attribute of CS...

HTML user registration page settings source code

Design the web page shown above: <!DOCTYPE htm...

win2008 server security settings deployment document (recommended)

I had been working on the project before the New ...

Unicode signature BOM (Byte Order Mark) issue for UTF-8 files

I recently encountered a strange thing when debug...

MySQL slave library Seconds_Behind_Master delay summary

Table of contents MySQL slave library Seconds_Beh...

mysql implements the operation of setting multiple primary keys

User table, ID number must be unique, mobile phon...

A brief analysis of the best way to deal with forgotten MySQL 8 passwords

Preface Readers who are familiar with MySQL may f...

Docker image optimization (from 1.16GB to 22.4MB)

Table of contents The first step of optimization:...

Detailed explanation of MySQL transaction processing usage and example code

MySQL transaction support is not bound to the MyS...