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

How are spaces represented in HTML (what do they mean)?

In web development, you often encounter characters...

JavaScript type detection method example tutorial

Preface JavaScript is one of the widely used lang...

Implementation of waterfall layout in uni-app project

GitHub address, you can star it if you like it Pl...

How to execute Linux shell commands in Docker

To execute a shell command in Docker, you need to...

Detailed explanation of the setting of background-image attribute in HTML

When it comes to pictures, the first thing we thi...

Detailed example of MySQL data storage process parameters

There are three types of MySQL stored procedure p...

JS implements layout conversion in animation

When writing animations with JS, layout conversio...

Tutorial on using the hyperlink tag in HTML

The various HTML documents of the website are con...

A brief discussion on the implementation of MySQL's limit paging optimization solution

Mysql limit paging statement usage Compared with ...

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Today I would like to share with you the CSS3 tra...

Detailed graphic tutorial on installing Ubuntu 20.04 dual system on Windows 10

win10 + Ubuntu 20.04 LTS dual system installation...

VMware ESXi installation and use record (with download)

Table of contents 1. Install ESXi 2. Set up ESXi ...

MySQL permissions and database design case study

Permissions and database design User Management U...

Vue implements sample code for dragging files from desktop to web page (can display pictures/audio/video)

Effect If you use it, please optimize the code an...

Vue SPA first screen optimization solution

Table of contents Preface optimization SSR Import...