
To learn how to create the CSS Neon Button/ Neon Effect follow the steps below and watch the video tutorial.
Demo:
Step1.
Add HTML
<div class="button">HOVER ME</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
height:100vh;
align-items: center;
justify-content: center;
background-color: black;
}
Style the button:
Note: You can achieve the neon effect by using CSS filter property or CSS box-shadow property/ text-shadow property.
.button {
color: #db3eb1;
border: 6px solid #db3eb1;
border-radius:15px;
padding: 15px 25px;
font-size: 30px;
font-family: tahoma;
letter-spacing:5px;
cursor: pointer;
font-weight: bold;
filter: drop-shadow(0 0 15px #db3eb1) drop-shadow(0 0 50px #db3eb1) contrast(2) brightness(2);
transition: .5s;
}
.button:hover {
color: black;
background-color: #db3eb1;
filter: drop-shadow(0 0 20px #db3eb1) contrast(2) brightness(2);
}
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you: