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

An example of refactoring a jigsaw puzzle game using vue3

Preface It took two days to reconstruct a puzzle ...

jQuery implements Table paging effect

This article shares the specific code of jQuery t...

Learning to build React scaffolding

1. Complexity of front-end engineering If we are ...

CSS and CSS3 flexible box model to achieve element width (height) adaptation

1. CSS realizes fixed width on the left and adapt...

Detailed explanation of the 14 common HTTP status codes returned by the server

HTTP Status Codes The status code is composed of ...

React hooks introductory tutorial

State Hooks Examples: import { useState } from &#...

img usemap attribute China map link

HTML img tag: defines an image to be introduced in...

Solution to automatically submitting the form and jumping to other pages after pressing Enter on the web page

After pressing Enter on the webpage, the form is a...

How to modify the time zone and time in Ubuntu system

On a Linux computer, there are two times, one is ...

Problems with changing password and connecting to Navicat when installing and using MySQL 8.0.16 under Windows 7

I encountered several problems when installing My...

Eight ways to implement communication in Vue

Table of contents 1. Component Communication 1. P...

Component design specifications for WeChat mini-program development

WeChat Mini Program Component Design Specificatio...

Win2008 R2 mysql 5.5 zip format mysql installation and configuration

Win2008 R2 zip format mysql installation and conf...

Implementing license plate input function in WeChat applet

Table of contents Preface background Big guess Fi...

What should I do if I want to cancel an incorrect MySQL command?

I typed a wrong mysql command and want to cancel ...