M/s VIKASH TECH - We Write Imaginations to Codes..!!

Cool Glowing Effect on Buttons using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Cool Glowing Effects on Buttons using only HTML & CSS.
CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colors, text sizes, padding, and even change styling properties when buttons enter different states.
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 colors smoothly with some blur effects.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="buttons">
      <button>Hover Me</button>
      <button>Hover Me</button>
    </div>
</body>
</html>

CSS

@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%;
  }
}
Category :

Comments

No comments found.

Leave a Comment

….

JOIN TODAY

Affiliate Marketing

Latest Posts

Popup Login Form Design in HTML & CSS

Hello readers, Today in this blog you'll learn how to create a Popup Login Form Design using only HTML &…

Popup Subscription Form using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Popup Subscription Form or Modal Box using HTML…

Custom Modal Box using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Dialog or Modal Box using HTML CSS &…

Neumorphism Profile Card UI Design using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS.…

Tags