How to create advance button in HTML, CSS And JavaScript

Posté 2025-03-06 21:54:53

353

Creating an advanced button in HTML involves using HTML, CSS, and optionally JavaScript for interactivity. Below are some ways you can create an advanced button:

1. Styled Button with CSS

This button includes hover effects, transitions, and a gradient background.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Button</title>
    <style>
        .advanced-btn {
            background: linear-gradient(45deg, #ff7e5f, #feb47b);
            border: none;
            color: white;
            padding: 12px 24px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .advanced-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
        }

        .advanced-btn:active {
            transform: scale(0.9);
        }
    </style>
</head>
<body>
    <button class="advanced-btn">Click Me</button>
</body>
</html>

2. Button with Icon (Using Font Awesome)

This button includes an icon and animation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button with Icon</title>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        .icon-btn {
            background-color: #007BFF;
            color: white;
            padding: 12px 20px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.3s;
        }

        .icon-btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <button class="icon-btn">
        <i class="fas fa-thumbs-up"></i> Like
    </button>
</body>
</html>

3. Button with Ripple Effect (Using JavaScript)

This adds a ripple effect when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ripple Effect Button</title>
    <style>
        .ripple-btn {
            position: relative;
            overflow: hidden;
            background-color: #28a745;
            color: white;
            padding: 12px 24px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .ripple-btn:hover {
            background-color: #218838;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
        }

        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <button class="ripple-btn" onclick="createRipple(event)">Click Me</button>

    <script>
        function createRipple(event) {
            const button = event.currentTarget;
            const circle = document.createElement("span");
            const diameter = Math.max(button.clientWidth, button.clientHeight);
            const radius = diameter / 2;

            circle.style.width = circle.style.height = `${diameter}px`;
            circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
            circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
            circle.classList.add("ripple");

            const ripple = button.getElementsByClassName("ripple")[0];

            if (ripple) {
                ripple.remove();
            }

            button.appendChild(circle);
        }
    </script>
</body>
</html>

Connectez-vous pour aimer, partager et commenter!