4.3/5 - (6 votes)

In the realm of web design, user interface elements like buttons play a crucial role in providing interactive and visually engaging experiences. One such eye-catching design technique involves using CSS to create glowing button effects that respond to user interactions like hover and click. In this blog, we will explore a simple yet effective example of how to achieve a glowing button effect using CSS.

Table of Contents

HTML Structure for button animation

Let’s start with the basic HTML structure of our button. Below is the minimal HTML code needed to create our button:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOVER AND CLICK EFFECT ON BUTTON</title>
</head>
<body>
    <button class="glow-on-hover" type="button">HOVER ME, THEN CLICK ME!</button>
</body>
</html>

In this HTML snippet, we have a button element with a class of glow-on-hover. This class will be used to apply our CSS styles and animations.

CSS Styling and Animations

Now, let’s dive into the CSS part, where the magic happens. The CSS code provided accomplishes several effects, including a glowing border on hover and a subtle color change on click.

General Styles

The general styles set up the basic layout and appearance of the button:

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
}

Here, we remove default margins and paddings and set the html and body elements to use the full viewport height (100vh). We also use flexbox to center the button both horizontally and vertically within the viewport. The background color is set to black (#000) to contrast nicely with the glowing button effect.

Button Styles

The core of our button styling is as follows:

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

The .glow-on-hover class defines the dimensions of the button, sets its background color to a dark shade (#111), and removes default borders and outlines. The color property sets the text color to white, and cursor: pointer indicates that the button is clickable. The position: relative and z-index: 0 ensure proper layering with respect to the glow effect.

Glowing Effect

The glowing effect is achieved using the :before pseudo-element:

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

background: linear-gradient(...) creates a colorful gradient that cycles through several colors.
position: absolute positions the pseudo-element relative to the button.
background-size: 400% enlarges the gradient to create a more pronounced glowing effect.
filter: blur(5px) applies a blur to the gradient, giving it a soft, glowing appearance.
animation: glowing 20s linear infinite applies an animation that makes the gradient move, creating a dynamic glow.
opacity: 0 initially hides the glow, which will become visible on hover.

Hover and Click Effects on button

Finally, the hover and click effects are defined:

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

hover:before makes the glowing effect visible when the button is hovered over.
active changes the text color to black when the button is clicked.
active:after ensures that the button’s background remains consistent when clicked.

Keyframes for Glowing Animation

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

The @keyframes glowing rule animates the gradient background, creating a continuous glowing effect that cycles through the gradient colors.

Also keep learning with us!

Conclusion

This example showcases how CSS can be used to create visually appealing interactive elements on a webpage. By using pseudo-elements, gradients, and animations, we can enhance the user experience with minimal code. Experiment with different colors, sizes, and timings to create unique effects that suit your design needs. The glowing button is a great starting point for adding a touch of interactivity and flair to your web projects.

0 0 votes

Course Rating