DEV Community

loading...
Cover image for Neon Light Button

Neon Light Button

stackfindover profile image Stackfindover ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Neon Light Button Output:

Discussion (0)

pic
Editor guide