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

Detailed explanation of the differences between var, let and const in JavaScript es6

First, a common question is, what is the relation...

How to view the network routing table in Ubuntu

What are Routing and Routing Table in Linux? The ...

A problem with MySQL 5.5 deployment

MySQL deployment Currently, the company deploys M...

iframe parameters with instructions and examples

<iframe src=”test.jsp” width=”100″ height=”50″...

Learn v-model and its modifiers in one article

Table of contents Preface Modifiers of v-model: l...

Example code of vue icon selector

Source: http://www.ruoyi.vip/ import Vue from ...

How to monitor the running status of docker container shell script

Scenario The company project is deployed in Docke...

How to install openjdk in docker and run the jar package

Download image docker pull openjdk Creating a Dat...

Automated front-end deployment based on Docker, Nginx and Jenkins

Table of contents Preliminary preparation Deploym...

How to improve Idea startup speed and solve Tomcat log garbled characters

Table of contents Preface Idea startup speed Tomc...

Index Skip Scan in MySQL 8.0

Preface MySQL 8.0.13 began to support index skip ...

Detailed explanation of using Docker to quickly deploy the ELK environment (latest version 5.5.1)

After installing Docker on the Linux server, Pull...

Summary of Mysql-connector-java driver version issues

Mysql-connector-java driver version problem Since...

14 techniques for high-performance websites

Original : http://developer.yahoo.com/performance...

Native JS to achieve special effects message box

This article shares with you a special effect mes...