Neon buttons are one of those web design trends that have been around for a while now but the neon button can still be seen popping up all over the internet.
Neon buttons look great, but there is a downside to them - they're not easy to code! In this article, you'll learn how to make your own neon button with CSS code.
HTML Code for Neon Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Neon Light Button Effect</title>
</head>
<body>
<button>
Neon Button
</button>
</body>
</html>
CSS Code for Neon Light Button Effect
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252525;
font-family: Arial, Helvetica, sans-serif;
}
button {
color: #f32179;
padding:20px;
border-color: #f32179;
font-size: 30px;
transition: 0.2s;
background-color: transparent;
border-radius: 3em;
cursor: pointer;
}
button:hover {
color: #fff;
background: #f32179;
box-shadow: 0 0 10px #f32179, 0 0 30px #f32179, 0 0 60px #f32179;
}
Output:
