First look at the effect: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. 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), 4. Use the clip-path: inset() property to clip the area and transform: translate(); to offset the effect once; For example, clipping the double pseudo-class: clip-path: inset(20% -5px 60% 0); transform: translate(-5px,0); the result is as follows (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(80% -5px 5% 0); gets: clip-path: inset(0 -5px 80% 0); gets: 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. 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
In web development, you often encounter characters...
Preface JavaScript is one of the widely used lang...
GitHub address, you can star it if you like it Pl...
To execute a shell command in Docker, you need to...
When it comes to pictures, the first thing we thi...
There are three types of MySQL stored procedure p...
When writing animations with JS, layout conversio...
The various HTML documents of the website are con...
Mysql limit paging statement usage Compared with ...
Today I would like to share with you the CSS3 tra...
win10 + Ubuntu 20.04 LTS dual system installation...
Table of contents 1. Install ESXi 2. Set up ESXi ...
Permissions and database design User Management U...
Effect If you use it, please optimize the code an...
Table of contents Preface optimization SSR Import...