Cool Glowing Effect on Buttons using HTML & CSS

0
Glowing Effect on Buttons

Hello readers, Today in this blog you’ll learn how to create Cool Glowing Effects on Buttons using only HTML & CSS. Previously I have shared Login Form Validation now it’s time to create a Glowing Effects on CSS Buttons.

What is CSS Button? How to make a glowing effect on buttons.

CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colours, text sizes, padding, and even change styling properties when buttons enter different states.

Preview of Glowing Effect On Button

As you can see in the image, there are two buttons with a glowing effect. These buttons are based on only HTML & CSS. Simply, to create this glow effect I moved two or more colours smoothly with some blur effects.

You Might Like this Blog:

  1. How to create Login Signup Page Using Simple HTML & CSS.
  2. How to create an HTML CSS animated sidebar navigation menu.
  3. Create A Mobile Responsive Chat Box
  4. Login Signup Page Using Advanced CSS And HTML.

Glowing Effect on Buttons in HTML & CSS.

Step 1

Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample

Create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By CodeWithNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing CSS Buttons | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="buttons">
      <button>Hover Me</button>
      <button>Hover Me</button>
    </div>
</body>
</html>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  overflow: hidden;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
}
button:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
button:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
button:first-child:before,
button:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:first-child:hover:before,
button:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
button:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here