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 Reply

Latest Posts

telegram bot

How to send message via Telegram Bot using PHP - Telegram API

Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

%d bloggers like this: