Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create animated banner links using HTML and CSS

HTML CSS Web Development Front End Technology

We can create animated banner links using HTML and CSS to make advertisements and call-to-action buttons more engaging. HTML provides the banner structure while CSS handles styling and animations to draw user attention and increase click-through rates.

Syntax

a {
    animation: animation-name duration timing-function direction iteration-count;
}

@keyframes animation-name {
    0% { /* initial styles */ }
    50% { /* middle styles */ }
    100% { /* final styles */ }
}

Example: Animated Banner Link

The following example creates a banner with an animated link that changes size and color 

<!DOCTYPE html>
<html>
<head>
<style>
    .bannerCover {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f4f4f4;
    }

    .banner {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 2rem;
        border-radius: 10px;
        text-align: center;
        background-color: white;
    }

    .banner a {
        text-decoration: none;
        font-weight: bold;
        font-size: 2rem;
        color: #007bff;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        transition: all 0.3s ease;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            color: #007bff;
            background-color: transparent;
        }
        50% {
            transform: scale(1.1);
            color: white;
            background-color: #dc3545;
        }
        100% {
            transform: scale(1);
            color: #007bff;
            background-color: transparent;
        }
    }

    .banner a:hover {
        animation-play-state: paused;
        background-color: #28a745;
        color: white;
    }
</style>
</head>
<body>
    <div class="bannerCover">
        <div class="banner">
            <a href="/index.htm">Visit TutorialsPoint</a>
            <p>Click the animated link above!</p>
        </div>
    </div>
</body>
</html>

A centered banner appears with "Visit TutorialsPoint" text that continuously pulses, scaling up/down while changing from blue to red background. On hover, the animation pauses and the link turns green.

Example: Sliding Banner Animation

This example creates a banner link that slides in from the left 

<!DOCTYPE html>
<html>
<head>
<style>
    .sliding-banner {
        width: 100%;
        height: 150px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .sliding-banner a {
        text-decoration: none;
        color: white;
        font-size: 1.8rem;
        font-weight: bold;
        padding: 1rem 2rem;
        background-color: rgba(0,0,0,0.2);
        border-radius: 25px;
        animation: slideIn 3s ease-in-out infinite;
    }

    @keyframes slideIn {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }
        20% {
            transform: translateX(50px);
            opacity: 1;
        }
        80% {
            transform: translateX(50px);
            opacity: 1;
        }
        100% {
            transform: translateX(100vw);
            opacity: 0;
        }
    }
</style>
</head>
<body>
    <div class="sliding-banner">
        <a href="/index.htm">? Special Offer - Click Here!</a>
    </div>
</body>
</html>

A gradient banner where the "Special Offer - Click Here!" link continuously slides from left to right across the banner, fading in and out.

Key Animation Properties

Property Description Example Value
animation-duration How long the animation takes 2s, 500ms
animation-iteration-count How many times to repeat infinite, 3
animation-direction Direction of animation alternate, reverse
animation-timing-function Speed curve ease, linear

Conclusion

Animated banner links effectively draw attention to important content and improve user engagement. Use CSS keyframes and animation properties to create smooth, professional effects that enhance rather than distract from your content.

Updated on: 2026-03-15T17:29:40+05:30

5K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements