前端例程20220906：霓虹灯效按钮演示原理代码更多例程

118 阅读 0 评论 78 点赞

我是靠谱客的博主虚拟草莓，这篇文章主要介绍前端例程20220906：霓虹灯效按钮演示原理代码更多例程，现在分享给大家，希望可以做个参考。

演示

在这里插入图片描述

原理

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

代码

复制代码

<!DOCTYPE html>
<html lang="en">

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

--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>

.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
154
<!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>