<div class="subscribe-card">
<h2>Join Our Newsletter</h2>
<p>Get the latest design trends straight to your inbox.</p>
<div class="subscribe-widget" id="sub-widget">
<input type="email" class="email-input" placeholder="Enter your email...">
<button class="sub-btn" id="sub-btn">
<span class="btn-text">Subscribe</span>
<svg class="check-icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"></polyline></svg>
</button>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.subscribe-card {
background: #ffffff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 450px;
}
.subscribe-card h2 {
color: #111827;
margin: 0 0 10px 0;
font-size: 1.75rem;
}
.subscribe-card p {
color: #6b7280;
margin-bottom: 30px;
}
.subscribe-widget {
position: relative;
display: flex;
height: 56px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 28px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.email-input {
flex-grow: 1;
background: transparent;
border: none;
padding: 0 24px;
font-size: 1rem;
color: #111827;
outline: none;
opacity: 1;
transition: opacity 0.3s;
}
.sub-btn {
background: #3b82f6;
color: #ffffff;
border: none;
padding: 0 32px;
border-radius: 28px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.4s;
display: flex;
justify-content: center;
align-items: center;
min-width: 130px;
}
.sub-btn:hover {
background: #2563eb;
}
.check-icon {
display: none;
transform: scale(0);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Success State Styles */
.subscribe-widget.success {
max-width: 56px;
margin: 0 auto;
border-color: #10b981;
}
.subscribe-widget.success .email-input {
opacity: 0;
padding: 0;
width: 0;
}
.subscribe-widget.success .sub-btn {
background: #10b981;
min-width: 56px;
padding: 0;
}
.subscribe-widget.success .btn-text {
display: none;
}
.subscribe-widget.success .check-icon {
display: block;
transform: scale(1);
}
const widget = document.getElementById("sub-widget");
const btn = document.getElementById("sub-btn");
btn.addEventListener("click", function() {
// Prevent clicking again if already in success state
if (widget.classList.contains("success")) return;
// Change state to success
widget.classList.add("success");
// Optional: Reset after a few seconds
setTimeout(function() {
widget.classList.remove("success");
// Clear the input value
const input = document.querySelector(".email-input");
input.value = "";
}, 4000);
});