How to create Glowing Buttons in CSS
2 min read
How to create Glowing Buttons in CSS
If you want to give your HTML button Glowing Effects, putting CSS Glow effects is ideal. It will help improve your visitors’ dwell time. The Glowing buttons will encourage visitors to see what your site has to offer and makes your page more dynamic. It also boosts your brand reputation.
Here we will Learn How to create Glowing Buttons in CSS
Html Page
1 | <!DOCTYPE html> |
2 | <html lang="en" > |
3 | <head> |
4 | <meta charset="UTF-8"> |
5 | <title>sarveshpathak.com - Glowing buttons</title> |
6 | <link rel="stylesheet" href="./style.css"> |
7 |
8 | </head> |
9 | <body> |
10 | <!-- partial:index.partial.html --> |
11 | <h1>How to create Glowing Buttons in CSS</h1> |
12 | <div class="glowing-buttons"> |
13 | <a href="#"> |
14 | <span></span> |
15 | <span></span> |
16 | <span></span> |
17 | <span></span> |
18 | Glowing Buttons |
19 | </a> |
20 | <a href="#"> |
21 | <span></span> |
22 | <span></span> |
23 | <span></span> |
24 | <span></span> |
25 | Glowing Buttons |
26 | </a> |
27 | <a href="#"> |
28 | <span></span> |
29 | <span></span> |
30 | <span></span> |
31 | <span></span> |
32 | Glowing Buttons |
33 | </a> |
34 | </div> |
35 | <!-- partial --> |
36 | |
37 | </body> |
38 | </html> |
CSS Page
1 | .glowing-buttons{ |
2 | display: flex; |
3 | justify-content: center; |
4 | align-items: center; |
5 | height: 100vh; |
6 | background: #050801; |
7 | font-family: 'Raleway', sans-serif; |
8 | font-weight: bold; |
9 | } |
10 | .glowing-buttons a{ |
11 | position: relative; |
12 | display: inline-block; |
13 | padding: 25px 30px; |
14 | margin: 40px 0; |
15 | color: #03e9f4; |
16 | text-decoration: none; |
17 | text-transform: uppercase; |
18 | transition: 0.5s; |
19 | letter-spacing: 4px; |
20 | overflow: hidden; |
21 | margin-right: 50px; |
22 | |
23 | } |
24 | .glowing-buttons a:hover{ |
25 | background: #03e9f4; |
26 | color: #050801; |
27 | box-shadow: 0 0 5px #03e9f4, |
28 | 0 0 25px #03e9f4, |
29 | 0 0 50px #03e9f4, |
30 | 0 0 200px #03e9f4; |
31 | -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); |
32 | } |
33 | .glowing-buttons a:nth-child(1){ |
34 | filter: hue-rotate(270deg); |
35 | } |
36 | .glowing-buttons a:nth-child(2){ |
37 | filter: hue-rotate(110deg); |
38 | } |
39 | .glowing-buttons a span{ |
40 | position: absolute; |
41 | display: block; |
42 | } |
43 | .glowing-buttons a span:nth-child(1){ |
44 | top: 0; |
45 | left: 0; |
46 | width: 100%; |
47 | height: 2px; |
48 | background: linear-gradient(90deg,transparent,#03e9f4); |
49 | animation: animate1 1s linear infinite; |
50 | } |
51 | @keyframes animate1{ |
52 | 0%{ |
53 | left: -100%; |
54 | } |
55 | 50%,100%{ |
56 | left: 100%; |
57 | } |
58 | } |
59 | .glowing-buttons a span:nth-child(2){ |
60 | top: -100%; |
61 | right: 0; |
62 | width: 2px; |
63 | height: 100%; |
64 | background: linear-gradient(180deg,transparent,#03e9f4); |
65 | animation: animate2 1s linear infinite; |
66 | animation-delay: 0.25s; |
67 | } |
68 | @keyframes animate2{ |
69 | 0%{ |
70 | top: -100%; |
71 | } |
72 | 50%,100%{ |
73 | top: 100%; |
74 | } |
75 | } |
76 | .glowing-buttons a span:nth-child(3){ |
77 | bottom: 0; |
78 | right: 0; |
79 | width: 100%; |
80 | height: 2px; |
81 | background: linear-gradient(270deg,transparent,#03e9f4); |
82 | animation: animate3 1s linear infinite; |
83 | animation-delay: 0.50s; |
84 | } |
85 | @keyframes animate3{ |
86 | 0%{ |
87 | right: -100%; |
88 | } |
89 | 50%,100%{ |
90 | right: 100%; |
91 | } |
92 | } |
93 |
94 |
95 | .glowing-buttons a span:nth-child(4){ |
96 | bottom: -100%; |
97 | left: 0; |
98 | width: 2px; |
99 | height: 100%; |
100 | background: linear-gradient(360deg,transparent,#03e9f4); |
101 | animation: animate4 1s linear infinite; |
102 | animation-delay: 0.75s; |
103 | } |
104 | @keyframes animate4{ |
105 | 0%{ |
106 | bottom: -100%; |
107 | } |
108 | 50%,100%{ |
109 | bottom: 100%; |
110 | } |
111 | } |
Result: How to create Glowing Buttons in CSS
Download Source Code
About Post Author
