Creating a Premium Button with Full-Screen Toast Notification in Blogger
5 min read
In this guide, you’ll learn how to create a premium-style button that triggers a full-screen toast notification when clicked. This is great for announcements, promotions, or special messages on your Blogger site.
css code
Step 1: Add the HTML & CSS
Paste the following code in Blogger Dashboard → Theme → Edit HTML . (inside the <head> section or before </body>)
<style>
/* Premium Button Styling */
.premium-btn {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
font-weight: bold;
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
text-transform: uppercase;
font-family: 'Arial', sans-serif;
margin: 10px;
}
.premium-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* Full-Screen Toast Notification */
.toast-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.toast-overlay.active {
opacity: 1;
visibility: visible;
}
.toast-content {
background: white;
padding: 30px;
border-radius: 10px;
max-width: 500px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: relative;
}
.toast-close {
position: absolute;
top: 10px;
right: 10px;
background: #ff4757;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
}
.toast-content h2 {
color: #6e8efb;
margin-bottom: 15px;
}
.toast-content p {
color: #555;
line-height: 1.6;
}
</style>
Html code
<!-- Premium Button -->
<button class="premium-btn" onclick="showToast()">Get Premium</button>
<!-- Toast Notification (Hidden by Default) -->
<div class="toast-overlay" id="toastOverlay">
<div class="toast-content">
<button class="toast-close" onclick="hideToast()">×</button>
<h2>Premium Access</h2>
<p>Upgrade to unlock exclusive content, ad-free browsing, and premium features!</p>
<button class="premium-btn" style="margin-top: 15px;" onclick="window.location.href='#'">Subscribe Now</button>
</div>
</div>
Js Code
<script>
function showToast() {
document.getElementById("toastOverlay").classList.add("active");
}
function hideToast() {
document.getElementById("toastOverlay").classList.remove("active");
}
// Close toast when clicking outside
document.getElementById("toastOverlay").addEventListener("click", function(e) {
if (e.target === this) {
hideToast();
}
});
</script>
