先看效果：

前言：

这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。
实现：
1. 首先定义一个div标签作为按钮，类名为 .anniu：

1. <div class="anniu">Aurora Borealis night</div>

复制代码

2. .anniu 的css基本样式，长宽，字体大小等：

1. .anniu,.anniu::after{
   
2.            font-family: 'Do Hyeon', sans-serif;
   
3.            width: 260px;
   
4.            height: 80px;
   
5.            text-align: center;
   
6.            font-size: 22px;
   
7.            line-height: 80px;
   
8.            color: rgb(255, 251, 251);
   
9.            background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
   
10.            box-shadow: 5px 0 0 rgb(0, 204, 255);
    
11.            cursor: pointer;
    
12.            position: relative;
    
13.        }

复制代码

font-family: ‘Do Hyeon’, sans-serif; 表示字体，可以去这个网址，里面有好多种类型的字体。
background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
巧妙利用背景色做出裁掉角的形状。这句语句表示以30度角开始显示渐变颜色，0到10%显示transparent透明色，10%到95%显示橘色，95%到100%显示绿色。
box-shadow: 5px 0 0 rgb(0, 204, 255); 表示右边那个蓝色的阴影。
cursor: pointer; 表示鼠标经过由箭头变成显示为小手。
3. 定义一个双伪类，跟 .anniu 长得一摸一样，通过绝对定位覆盖住 .anniu，第2步跟 .anniu 的并集选择器已经定义了一样的基本的样式，再添加如下样式：

1. .anniu::after{
   
2.            content: 'Aurora Borealis night';
   
3.            position: absolute;
   
4.            top: 0;
   
5.            left: 0;
   
6.            text-shadow: -5px -2px 0 rgb(0, 183, 255),
   
7.            5px 2px 0 rgb(0, 255, 115) ;
   
8.            visibility: hidden;
   
9.          
   
10.        }

复制代码

text-shadow: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115) ; 表示字体的阴影，让其字体在偏左上和偏右下分别有个rgb(0, 183, 255)色和rgb(0, 255, 115)色的阴影。
visibility: hidden; 表示隐藏这个伪类。
4. 通过clip-path: inset（）属性裁剪区域和transform: translate（）;偏移显示出一次效果；
具体意思是如下：
clip-path: inset（）表示可以用裁剪方式创建元素的可显示区域（矩形），那么区域内的部分显示，区域外的就会隐藏。
transform: translate（）就是移动；
如，对双伪类进行裁剪： clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）；得如下

(20% -5px 60% 0); 表示裁剪伪类从上到下裁剪到20%，从右到左裁剪掉-5px（因为要显示阴影，所以是负的），从下到上裁剪掉60%，从左到右裁剪0%，这样一来，就只会剩下中间高剩余20%，宽还多了5px的矩形部分，其余被裁剪掉的边角料就会隐藏了，同时设置 translate（）让它往左偏移一点，就得到了上面的效果。
接下来再裁剪3次伪类的效果。
clip-path: inset(50% -5px 30% 0);得：

clip-path: inset(80% -5px 5% 0)；得：

clip-path: inset(0 -5px 80% 0);得：

5. 通过第四步的裁剪效果，我们就可以设置animation动画了，鼠标经过就显示伪类不同的裁剪效果与偏移效果，裁剪位置与偏移位置这个可以根据自己感觉设置。

1. .anniu:hover::after{
   
2.            animation: san 1s ;
   
3.            animation-timing-function: steps(1, end);
   
4.        }

复制代码

1. @keyframes san{
   
2.            0%{
   
3.             clip-path: inset(20% -5px  60%  0);
   
4.             transform: translate(-6px,5px);
   
5.             visibility: visible;
   
6.            }
   
7.            10%{
   
8.             clip-path: inset(50% -5px  30%  0);
   
9.             transform: translate(6px,-5px);
   
10.            }
    
11.            20%{
    
12.             clip-path: inset(20% -5px  60%  0);
    
13.             transform: translate(5px,0px);
    
14. 
    
15.             }
    
16.             30%{
    
17.                 clip-path: inset(80% -5px  5%  0);
    
18.             transform: translate(-8px,5px);
    
19.             }
    
20.             40%{
    
21.                 clip-path: inset(0 -5px  80%  0);
    
22.             transform: translate(-4px,-3px);
    
23. 
    
24.             }
    
25.             50%{
    
26.                 clip-path: inset(50% -5px  30%  0);
    
27.             transform: translate(-6px,-5px);
    
28.             }
    
29.             60%{
    
30.                 clip-path: inset(80% -5px  5%  0);
    
31.             transform: translate(-7px,5px);
    
32. 
    
33.             }
    
34.             70%{
    
35.                 clip-path: inset(0 -5px  80%  0);
    
36.             transform: translate(3px,6px);
    
37.             }
    
38.             80%{
    
39.                 clip-path: inset(50% -5px  30%  0);
    
40.             transform: translate(5px,5px);
    
41. 
    
42.             }
    
43.             90%{
    
44.                 clip-path: inset(20% -5px  60%  0);
    
45.             transform: translate(6px,-5px);
    
46. 
    
47.             }
    
48.             100%{
    
49.                 clip-path: inset(0 -5px  80%  0);
    
50.             transform: translate(1px,5px);
    
51. 
    
52.             }
    
53.        }

复制代码

visibility: visible; 让伪类显示。
animation-timing-function: steps(1, end); 1表示0%到10%，10%到20%，…它们之间只用一帧，若写2就会是两帧，只用一帧是为了卡顿效果更好。end 表示第一帧是第一步动画开始。若为start表示第一帧是第一步动画结束。
完整代码：

1. <!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{
   
2.            font-family: 'Do Hyeon', sans-serif;
   
3.            width: 260px;
   
4.            height: 80px;
   
5.            text-align: center;
   
6.            font-size: 22px;
   
7.            line-height: 80px;
   
8.            color: rgb(255, 251, 251);
   
9.            background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
   
10.            box-shadow: 5px 0 0 rgb(0, 204, 255);
    
11.            cursor: pointer;
    
12.            position: relative;
    
13.        }       .anniu::after{
    
14.            content: 'Aurora Borealis night';
    
15.            position: absolute;
    
16.            top: 0;
    
17.            left: 0;
    
18.            text-shadow: -5px -2px 0 rgb(0, 183, 255),
    
19.            5px 2px 0 rgb(0, 255, 115) ;
    
20.            visibility: hidden;
    
21.          
    
22.        }        .anniu:hover::after{
    
23.            animation: san 1s ;
    
24.            animation-timing-function: steps(1, end);
    
25.        }       /*               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{
    
26.            0%{
    
27.             clip-path: inset(20% -5px  60%  0);
    
28.             transform: translate(-6px,5px);
    
29.             visibility: visible;
    
30.            }
    
31.            10%{
    
32.             clip-path: inset(50% -5px  30%  0);
    
33.             transform: translate(6px,-5px);
    
34.            }
    
35.            20%{
    
36.             clip-path: inset(20% -5px  60%  0);
    
37.             transform: translate(5px,0px);
    
38. 
    
39.             }
    
40.             30%{
    
41.                 clip-path: inset(80% -5px  5%  0);
    
42.             transform: translate(-8px,5px);
    
43.             }
    
44.             40%{
    
45.                 clip-path: inset(0 -5px  80%  0);
    
46.             transform: translate(-4px,-3px);
    
47. 
    
48.             }
    
49.             50%{
    
50.                 clip-path: inset(50% -5px  30%  0);
    
51.             transform: translate(-6px,-5px);
    
52.             }
    
53.             60%{
    
54.                 clip-path: inset(80% -5px  5%  0);
    
55.             transform: translate(-7px,5px);
    
56. 
    
57.             }
    
58.             70%{
    
59.                 clip-path: inset(0 -5px  80%  0);
    
60.             transform: translate(3px,6px);
    
61.             }
    
62.             80%{
    
63.                 clip-path: inset(50% -5px  30%  0);
    
64.             transform: translate(5px,5px);
    
65. 
    
66.             }
    
67.             90%{
    
68.                 clip-path: inset(20% -5px  60%  0);
    
69.             transform: translate(6px,-5px);
    
70. 
    
71.             }
    
72.             100%{
    
73.                 clip-path: inset(0 -5px  80%  0);
    
74.             transform: translate(1px,5px);
    
75. 
    
76.             }
    
77.        }    </style></head><body>    <div class="anniu">Aurora Borealis night</div></body></html>

复制代码

到此这篇关于html+css实现赛博朋克风格按钮 的文章就介绍到这了,更多相关html css 赛博朋克风格按钮 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！