Modern Glow Button

Buttons are an essential part of modern websites, and giving them interactive effects makes your site look more attractive. In this tutorial, we will explore how to create a 3D Magnetic Button Effect using only HTML and CSS. This effect features smooth hover animations, glowing borders, and a magnetic ripple effect that grabs user attention instantly.

Why Use 3D Magnetic Buttons?

Modern UI/UX design trends focus on interactive and dynamic elements. A magnetic button enhances user engagement and provides a professional look to your website or web application. By using just HTML and CSS, you can achieve this effect without JavaScript, keeping your code lightweight and efficient.

Key Features of This Button Effect

  • Hover Ripple Animation: A radial glow expands when you hover over the button.
  • 3D Press Effect: The button slightly shrinks when clicked, giving a realistic 3D look.
  • Gradient Background: Smooth gradient colors shift on hover for a stylish effect.
  • Glowing Border Animation: A moving gradient border creates a neon-like glow.
  • Responsive Design: The buttons adapt well to any screen size, including mobile devices.

Step-by-Step Code Explanation

1. HTML Structure

We use a simple <div> container with multiple <button> elements. Each button is styled with CSS to achieve the 3D magnetic effect.

🌐 Modern Glow Button 



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Magnetic Button Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #1c1f2b;
            font-family: Arial, sans-serif;
        }

        .button-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .button {
            position: relative;
            display: inline-block;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            background: linear-gradient(45deg, #ff7eb3, #ff758c);
            border: none;
            border-radius: 12px;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
            box-shadow: 0px 4px 15px rgba(255, 118, 140, 0.5);
            overflow: hidden;
        }

        .button::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            opacity: 0;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }

        .button:hover::before {
            transform: translate(-50%, -50%) scale(3);
            opacity: 1;
        }

        .button:hover {
            background: linear-gradient(45deg, #ff758c, #ff7eb3);
            box-shadow: 0px 8px 20px rgba(255, 118, 140, 0.7);
        }

        .button:active {
            transform: scale(0.9);
        }

        .button::after {
            content: "";
            position: absolute;
            top: -3px;
            left: -3px;
            width: calc(100% + 6px);
            height: calc(100% + 6px);
            border-radius: 12px;
            border: 2px solid transparent;
            background: linear-gradient(45deg, rgba(255, 118, 140, 0.8), rgba(255, 165, 0, 0.8), rgba(0, 255, 255, 0.8));
            background-size: 200% 200%;
            z-index: -1;
            animation: glowing 2s infinite linear;
            opacity: 0.6;
        }

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

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
    </style>
</head>

<body>
    <div class="button-container">
        <button class="button">Button 1</button>
        <button class="button">Button 2</button>
        <button class="button">Button 3</button>
        <button class="button">Button 4</button>
        <button class="button">Button 5</button>
    </div>
</body>

</html>

2. Base Button Styling

The button has padding, bold text, rounded corners, and a gradient background. It also includes a box shadow for a floating 3D look.

3. Hover Effect

On hover, a radial gradient expands from the center, creating a magnetic glow. Additionally, the background gradient shifts direction, and the shadow becomes stronger.

4. Active (Click) Effect

When pressed, the button slightly scales down using transform: scale(0.9);, providing a realistic button press effect.

5. Glowing Border Animation

The button’s outer border is animated using @keyframes. The gradient border continuously shifts color, creating a neon glowing border effect.

Applications of This Project

  • Perfect for call-to-action (CTA) buttons on websites.
  • Can be used in portfolio websites to showcase UI design skills.
  • Ideal for login forms, signup pages, and landing pages.
  • A great frontend practice project for beginners learning HTML & CSS.

Final Thoughts

This project demonstrates how to build an interactive 3D magnetic button effect using only HTML and CSS. The combination of gradient backgrounds, hover animations, and glowing borders makes the buttons stand out and improves user interaction. If you want to make your website more appealing, try adding these modern CSS buttons to your next project.

🔗