Ready to Take the Next Step?
Join thousands of others who trust us to bring their vision to life.
This fully responsive and animated Call-To-Action (CTA) block is designed to instantly grab attention and drive user engagement. Built with HTML, Bootstrap 5, and a touch of JavaScript, it smoothly animates into view as visitors scroll, making it perfect for landing pages, portfolios, or product websites.
✨ Features:
Smooth fade-in animation on scroll
Glowing call-to-action button
Bootstrap 5 responsive layout
Lightweight and easy to integrate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated CTA Section</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cta-section {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
padding: 100px 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section h1 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 20px;
}
.cta-section p {
font-size: 1.25rem;
margin-bottom: 40px;
}
.cta-button {
font-size: 1.2rem;
padding: 15px 35px;
background-color: #fff;
color: #2575fc;
border: none;
border-radius: 50px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
}
.cta-button:hover {
background-color: #e6e6e6;
color: #1a53c0;
box-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
}
.fade-in {
opacity: 0;
transform: translateY(50px);
transition: all 1s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Decorative animated bubbles (optional) */
.bubble {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.15);
animation: float 10s infinite ease-in-out;
}
.bubble:nth-child(1) { width: 60px; height: 60px; top: 20%; left: 10%; animation-delay: 0s; }
.bubble:nth-child(2) { width: 100px; height: 100px; top: 70%; left: 80%; animation-delay: 2s; }
.bubble:nth-child(3) { width: 40px; height: 40px; top: 40%; left: 50%; animation-delay: 4s; }
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body>
<section class="cta-section fade-in" id="cta">
<div class="container">
<h1>Ready to Take the Next Step?</h1>
<p>Join thousands of others who trust us to bring their vision to life.</p>
<button class="cta-button">Get Started Now</button>
</div>
<!-- Optional decorative bubbles -->
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</section>
<script>
// Simple scroll animation
window.addEventListener('scroll', function() {
const cta = document.getElementById('cta');
const rect = cta.getBoundingClientRect();
const windowHeight = window.innerHeight;
if (rect.top < windowHeight - 100) {
cta.classList.add('visible');
}
});
// Trigger animation if already in view
window.dispatchEvent(new Event('scroll'));
</script>
</body>
</html>
