The neon light button animation effect can be easily generated by using HTML and CSS. By using HTML we will design the basic structure of the button and then by using the properties of CSS, we can create the neon light animation effect.
Hello, guys in this tutorial we will create neon light button animation effects on hover using HTML & CSS.
First, we need to create two files index.html and style.css then we need to do code for it.
Neon Light Button Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Neon Hover Effect Using HTML & CSS | CSS Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>
Neon Light Button Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #000;
}
/* blue neon
.button {
outline: 0;
position: relative;
display: inline-block;
padding: 10px 40px;
font-size: 20px;
overflow: hidden;
cursor: pointer;
border: 1px solid #4b00ff;
background: #4b00ff;
color: #fff;
font-weight: 500;
transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
.button:hover {
background-color: #4b00ff;
color: #fff;
box-shadow: 0 0 5px #4b00ff,
0 0 20px rgb(75 0 255 / 0.8),
0 0 35px rgb(75 0 255 / 0.7),
0 0 50px rgb(75 0 255 / 0.6);
border-color: #fff;
}*/
.button {
outline: 0;
position: relative;
display: inline-block;
padding: 10px 40px;
font-size: 20px;
overflow: hidden;
cursor: pointer;
border: 2px solid #FFFF00;
background: #FFFF00;
color: #000;
font-weight: 600;
transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
}
.button:hover {
background-color: #FFFF00;
color: #000;
box-shadow: 0 0 5px #FFFF00,
0 0 20px rgb(255 255 0 / 0.8),
0 0 35px rgb(255 255 0 / 0.7),
0 0 50px rgb(255 255 0 / 0.6);
border-color: #fff;
}
Neon Light Button video Output:
Neon Light Button codepen Output:
Top comments (0)