前端例程20220906：霓虹灯效按钮

演示

在这里插入图片描述
原理

按钮使用阴影实现发光效果；
设置元素块加强外发光效果，设置为光标悬停时才显现；
使用元素块定位到按钮下方，3D形变后进行模糊处理作为倒影；
代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>霓虹(Neon)灯效按钮title>

    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100vh;
        }
    style>

    <style>
        /* 全局色表 */
        :root {
            --color-bg1: #31202b;
            --color-btn1: #fd06bb;

            --color-bg2: #1e2233;
            --color-btn2: #07d4f8;
        }

        body {
            display: flex;
            /* 按钮灯光会照亮并染色周围背景 */
            background: linear-gradient(to right, var(--color-bg1) 0% 40%, var(--color-bg2) 60% 100%);
            align-items: center;
            justify-content: space-around;
        }

        .btn {
            width: 200px;
            height: 60px;
            margin: 20px;
            background: transparent;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 4px;
            border: 4px solid;
            border-radius: 10px;
        }

        .btn:nth-child(1) {
            color: var(--color-btn1);
            text-shadow: 0 0 10px var(--color-btn1), 0 0 20px var(--color-btn1);
            border-color: var(--color-btn1);
            box-shadow: inset 0 0 20px var(--color-btn1), 0 0 20px var(--color-btn1);
        }

        .btn:nth-child(2) {
            color: var(--color-btn2);
            text-shadow: 0 0 10px var(--color-btn2), 0 0 20px var(--color-btn2);
            border-color: var(--color-btn2);
            box-shadow: inset 0 0 20px var(--color-btn2), 0 0 20px var(--color-btn2);
        }

        .btn:focus {
            outline: none;
        }
    style>

    <style>
        /* 下面内容是光标悬停效果 */
        .btn {
            transition: background-color 0.1s linear;
        }

        .btn:nth-child(1):hover {
            background: var(--color-btn1);
            color: var(--color-bg1);
            text-shadow: 0;
        }

        .btn:nth-child(2):hover {
            background: var(--color-btn2);
            color: var(--color-bg2);
            text-shadow: 0;
        }

        /* 下面内容用于增强光标悬停时外发光效果 */
        .btn {
            position: relative;
        }

        .btn::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            transition: background-color 0.1s linear;
        }

        .btn:nth-child(1)::before {
            box-shadow: 0 0 50px 10px var(--color-btn1);
        }

        .btn:nth-child(2)::before {
            box-shadow: 0 0 50px 10px var(--color-btn2);
        }

        .btn:hover:before {
            opacity: 1;
        }
    style>

    
    <style>
        .btn::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 120%;
            left: 0;
            /* perspective和rotateX组合使倒影成为梯形，scale来调整倒影尺寸 */
            transform: perspective(50px) rotateX(45deg) scale(1, 0.4);
            filter: blur(30px);
            opacity: 0.7;
        }

        .btn:nth-child(1)::after {
            background: var(--color-btn1);
        }

        .btn:nth-child(2)::after {
            background: var(--color-btn2);
        }
    style>
head>

<body>
    <button class="btn">
        BUTTON
    button>
    <button class="btn">
        BUTTON
    button>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
前端例程20220906：霓虹灯效按钮

演示

原理

代码

更多例程
