Animated Neon Hover Button With Pure CSS || Free Source Code

 Hello friends, in this article you will know how to create an awesome animated neon hover button with just pure CSS. Let me clear that, I haven't use a single line of JavaScript this effect is achieved with just pure CSS with box-shadow and some transitions. This is the written version of the video uploaded on the ramCoder YouTube channel. Achieving this animated neon hover button is not a hard work, anyone with a little knowledge of CSS can easily create this awesome neon hover button. I have uploaded the source code file in the GitHub repository with the download link at the end of this article. Also, I have embedded the code in the code box in this article also.

I have used :hover and just box-shadow to achieve this animated neon hover button with pure CSS. This effect doesn't need to use any CSS framework or any animation library.


In order to create this awesome animated neon hover button with pure vanilla CSS. You will just need to follow couple of steps listed below.

Step 1:

First of all, you will need to create an inde.html file and add the following code from the code box and save the changes to take the effect.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Awesome Neon Animation - ramCoder</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <button>Hover</button>
  </body>
</html>{codeBox}

Step 2:

After you completed index.html file, then you will need to create an style.css file and add that file in the same directory and paste the CSS code from the code box into your style.css file and save changes to take changes.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(17, 17, 63);
}
button {
  height: 60px;
  width: 200px;
  font-size: 2.5rem;
  color: aqua;
  border: 2px solid aqua;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  transition: 0.4s ease;
}
button:hover {
  background-color: aqua;
  color: rgb(17, 17, 63);
  border: 2px solid aqua;
  box-shadow: 0px 0px 50px aqua;
}{codeBox}

So congratulations, you just created an awesome animated neon hover button with just pure CSS. You can also download the source code from GitHub from the link below.

{getButton} $text={Download Source Code} $icon={download}

Post a Comment

Previous Post Next Post