How To Create Stunning Buttons with Hover Glowing Effects By Kainat Ijaz

How To Create Stunning Buttons with Hover Glowing Effects By Kainat Ijaz. Buttons are an essential element in web design. They are used to guide users and encourage them to take action. But why settle for plain and boring buttons when you can make them stand out with hover glowing effects? In this tutorial, we will show you how to create awesome buttons with hover glowing effects using CSS.

Step 1: HTML Markup

To begin, let’s create the HTML markup for our buttons. We will use the <button> element and give it a unique class name. Here’s an example:

<button class="glow-button">Click Me</button>

Feel free to add more buttons with different class names if you want to experiment with different styles.

Step 2: CSS Styling

Now let’s move on to the CSS styling. First, we need to target the .glow-button class and set its initial styles. Here’s an example:

.glow-button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
}

This will create a basic button with a blue background color, white text, and rounded corners.

Next, we will add the hover glowing effect. We can achieve this by using CSS animations and keyframes. Here’s an example:

.glow-button:hover {
  animation: glowing 1.5s infinite;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 5px #3498db;
  }
  50% {
    box-shadow: 0 0 20px #3498db;
  }
  100% {
    box-shadow: 0 0 5px #3498db;
  }
}

This CSS code will make the button glow with a shadow effect on hover. The animation lasts for 1.5 seconds and repeats infinitely.

Step 3: Applying the Styles

Now that we have created the HTML markup and the CSS styling, it’s time to apply the styles to our buttons. You can do this by linking an external CSS file or by adding the styles directly to your HTML file using the <style> tag.

If you choose to link an external CSS file, make sure to add the following line to the <head> section of your HTML file:

<link rel="stylesheet" href="path/to/your/css/file.css">

If you prefer to add the styles directly to your HTML file, you can do so by adding the following code within the <style> tags:

.glow-button {
  background-color: #3498db;
  color: #fff;
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
}

.glow-button:hover {
  animation: glowing 1.5s infinite;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 5px #3498db;
  }
  50% {
    box-shadow: 0 0 20px #3498db;
  }
  100% {
    box-shadow: 0 0 5px #3498db;
  }
}

Conclusion

By adding hover glowing effects to your buttons, you can make them more interactive and engaging. This simple CSS technique can add a touch of professionalism and elegance to your website. Feel free to experiment with different colors, durations, and shadow effects to create your own unique button styles.

Visit Our Youtube Channel

Related : https://cssanimation.shop/awesome-buttons-hover-effects-using-only-html-css-informativeworld713/

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="main">
<div class="cst-btn">Hover Me</div>
</div>
</body>
</html>
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css);
/*background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);*/
body{
background: #333;
}
.main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.cst-btn{
position: relative;
padding: 10px;
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #ddd;
background: #f5f5f5;
cursor: pointer;
border-radius: 20px;
}
.cst-btn:before{
position: absolute;
content: "";
left: -4px;
top: -4px;
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
width: calc(100% + 8px);
height: calc(100% + 8px);
z-index: -1;
border-radius: 20px;
filter: blur(10px);
opacity: 0;
transition: .3s;
background-size: 400%;
}
.cst-btn:hover:before{
animation: glow 7s linear infinite;
opacity: 1;
}
@keyframes glow {
0%{
background-position: 0 0;
}
50%{
background-position: 400% 0;
}
100%{
background-position: 0 0;
}
}
14 thoughts on “How To Create Stunning Buttons with Hover Glowing Effects By Kainat Ijaz”

Leave a Reply

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