How to create advance button in HTML, CSS And JavaScript

2025-03-06 21:54:53 • HTML

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>

Please log in to like, share and comment!

How to create advance button in HTML, CSS And JavaScript

1. Styled Button with CSS

2. Button with Icon (Using Font Awesome)

3. Button with Ripple Effect (Using JavaScript)

Read More

His is How AI is Changing Everyday Life in 2025

How to Optimize JavaScript for Better Web Performance

YD-Purification Clean Room Partition Systems for Precision Control

Creating a Responsive Navbar with Advanced Features

How to Develop Leadership Skills for Success

Join

Language

How to create advance button in HTML, CSS And JavaScript

1. Styled Button with CSS

2. Button with Icon (Using Font Awesome)

3. Button with Ripple Effect (Using JavaScript)

Read More

His is How AI is Changing Everyday Life in 2025

How to Optimize JavaScript for Better Web Performance

YD-Purification Clean Room Partition Systems for Precision Control

Creating a Responsive Navbar with Advanced Features

How to Develop Leadership Skills for Success