CSS-button按钮霓虹灯效果
2021-01-25 08:13
标签：https near direct otto amp oct enter box link 代码学习来自本视频https://live.csdn.net/v/12297?utm_medium=distribute.pc_category.387682.nonecase&depth_1-utm_source=distribute.pc_category.387682.nonecase CSS-button按钮霓虹灯效果 标签：https near direct otto amp oct enter box link 原文地址：https://www.cnblogs.com/wenrouduidai/p/13237307.html 1 DOCTYPE html>
2 html lang="en">
3
4 head>
5 meta charset="UTF-8">
6 meta name="viewport" content="width=device-width, initial-scale=1.0">
7 title>button霓虹灯title>
8 link href="index.css" rel="stylesheet">
9 head>
10
11 body>
12 a href="">Buttona>
13 a href="">Buttona>
14 a href="">Buttona>
15 body>
16
17 html>
1 body{
2 display: flex;
3 flex-direction: column;
4 justify-content: center;
5 align-items: center;
6 background-color: #000000;
7 min-height: 100vh;
8 }
9 a{
10 position: relative;
11 padding: 10px 30px;
12 margin: 45px 0;
13 color: #21ebff;
14 text-decoration: none;
15 font-size: 20px;
16 text-transform: uppercase;
17 transition: 0.5s;
18 overflow: hidden;
19 -webkit-box-reflect: below 1px linear-gradient(transition,#0003);
20 }
21 a:hover{
22 background-color: #21ebff;
23 color: #111;
24 box-shadow: 0 0 50px #21ebff;
25 transition-delay: 0.5s;
26 }
27
28 a:nth-child(1){
29 filter: hue-rotate(115deg);
30 }
31 a:nth-child(3){
32 filter: hue-rotate(270deg);
33 }
34
35 a::before{
36 content: "";
37 position: absolute;
38 top: 0;
39 left: 0;
40 width: 10px;
41 height: 10px;
42 border-top: 2px solid #21ebff;
43 border-left: 2px solid #21ebff;
44 transition: 0.5s;
45 transition-delay: 0.5s;
46 }
47 a:hover::before{
48 width: 100%;
49 height: 100%;
50 transition-delay: 0s;
51 }
52 a::after{
53 content: "";
54 position: absolute;
55 right: 0;
56 bottom: 0;
57 width: 10px;
58 height: 10px;
59 border-bottom: 2px solid #21ebff;
60 border-right: 2px solid #21ebff;
61 transition: 0.5s;
62 transition-delay: 0.5s;
63 }
64
65 a:hover::after{
66 width: 100%;
67 height: 100%;
68 transition-delay: 0s;
69 }body{
70 display: flex;
71 flex-direction: column;
72 justify-content: center;
73 align-items: center;
74 background-color: #000000;
75 min-height: 100vh;
76 }
77 a{
78 position: relative;
79 padding: 10px 30px;
80 margin: 45px 0;
81 color: #21ebff;
82 text-decoration: none;
83 font-size: 20px;
84 text-transform: uppercase;
85 transition: 0.5s;
86 overflow: hidden;
87 -webkit-box-reflect: below 1px linear-gradient(transition,#0003);
88 }
89 a:hover{
90 background-color: #21ebff;
91 color: #111;
92 box-shadow: 0 0 50px #21ebff;
93 transition-delay: 0.5s;
94 }
95
96 a:nth-child(1){
97 filter: hue-rotate(115deg);
98 }
99 a:nth-child(3){
100 filter: hue-rotate(270deg);
101 }
102
103 a::before{
104 content: "";
105 position: absolute;
106 top: 0;
107 left: 0;
108 width: 10px;
109 height: 10px;
110 border-top: 2px solid #21ebff;
111 border-left: 2px solid #21ebff;
112 transition: 0.5s;
113 transition-delay: 0.5s;
114 }
115 a:hover::before{
116 width: 100%;
117 height: 100%;
118 transition-delay: 0s;
119 }
120 a::after{
121 content: "";
122 position: absolute;
123 right: 0;
124 bottom: 0;
125 width: 10px;
126 height: 10px;
127 border-bottom: 2px solid #21ebff;
128 border-right: 2px solid #21ebff;
129 transition: 0.5s;
130 transition-delay: 0.5s;
131 }
132
133 a:hover::after{
134 width: 100%;
135 height: 100%;
136 transition-delay: 0s;
137 }