Awesome Button hover GLOW effect Using Only HTML & CSS

Learn Awesome Button hover GLOW effect Using Only HTML & CSS @informativeworld713.

Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

Have you ever wanted to add some pizzazz to your website buttons? Well, look no further! In this tutorial, we will show you how to create an awesome button hover GLOW effect using only HTML.

First, let’s get started by creating a basic HTML button. Here’s the code:

<button>Click Me</button>

Now that we have our button, let’s add some style to it. We’ll use CSS to create the GLOW effect. Here’s the code:

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

button:hover {
    box-shadow: 0 0 10px #4CAF50;
}

With this CSS code, the button will have a green background color and white text. When you hover over the button, it will have a subtle glow effect due to the box-shadow property.

But what if you want to make the glow effect more pronounced? No problem! We can add another layer of box-shadow to achieve that. Here’s the updated CSS code:

button:hover {
    box-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50;
}

Now the glow effect will be more noticeable when you hover over the button. Feel free to experiment with different colors and sizes to match your website’s design.

However, if you want to take the glow effect to the next level, you can add animation to it. Let’s create a pulsating effect using CSS keyframes:

@keyframes glow {
    0% { box-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50; }
    50% { box-shadow: 0 0 20px #4CAF50, 0 0 40px #4CAF50; }
    100% { box-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50; }
}

button:hover {
    animation: glow 1s infinite;
}

Now the glow effect will pulsate, giving your button an eye-catching animation.

Remember, you can always customize the colors, sizes, and animation duration to fit your needs. Play around with the code and see what works best for your website.

That’s it! You now know how to create an awesome button hover GLOW effect using only HTML. We hope you found this tutorial helpful. Happy coding!

Related:https://cssanimation.shop/rounded-pulse-button-hover-shadow-effect-informativeworld713/

Watch Our More Videos On YouTube

<button class='glowing-btn'>
<span class='glowing-txt'>
HO<span class='faulty-letter'>VER</span> 
ME
</span>
</button>
@import url("https://fonts.googleapis.com/css?family=Raleway");

:root {
  --glow-color: #F4FC00;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.35em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-family: "Raleway", sans-serif;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 1em;

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.glowing-btn:hover .glowing-txt {
  animation: none;
}

.glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
  .glowing-btn{
    font-size: 1em;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *