DESIGN AND DEVELOPMENT
The floating "Buy" button and popup were created with a modern, responsive design in mind. Using a combination of CSS, HTML, and JavaScript, the button can be easily integrated into both WordPress and Blogger websites. The gradient background gives it a lively, attention-grabbing appearance, while the floating position ensures it stays visible and accessible on any page..
KEY FEATURES:
Floating Position:The button remains fixed at the bottom-right of the page, ensuring visibility as users scroll.
Responsive Design:The button adjusts its size and position according to screen size, making it mobile-friendly.
Eye-catching Gradient:The background is animated with a colorful gradient that cycles smoothly, keeping the design dynamic.
Popup Interaction:Upon clicking the button, a sleek popup appears with a message for users and two actionable buttons (Join Telegram and Go to Download Link).
Telegram Integration:The popup prompts users to join a Telegram group for further details about the password for a zip file, enhancing user engagement.
FUNCTIONALITIES
This button works seamlessly for both WordPress and Blogger platforms. The process is simple:
1. User clicks the floating "Buy" button:This triggers the display of a popup, providing them with important instructions about accessing a password-protected file.
2. Popup Details:The popup contains information about the file being password-protected and instructs users to join a Telegram group for access. Additionally, it offers a direct link to the download page.
3. Smooth Transition:When a user interacts with the popup, they are smoothly directed to either the Telegram group or the download page as per their choice.
HOW TO ADD A FLOATING BUY BUTTON IN POST
<a class='ssr-buy' href='javascript:void(0)' onclick="showPopup()"><i class="fa-regular fa-cart-shopping"></i> DEMO-SSR </a>
<!-- Popup Structure -->
<div id="ssr-popup" class="ssr-popup">
<div class="ssr-popup-content">
<h2>Important Note</h2>
<p>
This Template zip file is Password protected. If you want to know the password, please join our Telegram group and type
<strong style="color: #ffd700; background: #333; padding: 2px 5px; border-radius: 4px;">#SSRTECH</strong> and send it.
</p>
<div class="ssr-popup-buttons">
<a href="https://t.me/Saksham_singh_ssr" target="_blank" class="ssr-popup-btn">Join Telegram</a>
<a href="https://example.com/download" target="_blank" class="ssr-popup-btn ssr-download-btn">Go to Download Link</a>
</div>
<span class="ssr-popup-close" onclick="closePopup()">✖</span>
</div>
</div>
<style>
/* Floating Buy Button */
.ssr-buy {
color: #fff;
padding: 10px 20px;
border-radius: 14px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
background: linear-gradient(90deg, #ff4e4e, #ff1c1c, #ff3c3c, #ff0000, #ff5e5e);
background-size: 300% 300%;
animation: gradientAnimation 5s ease infinite;
position: fixed;
bottom: 70px;
right: 30px;
z-index: 99999;
text-align: center;
text-decoration: none;
box-shadow: 0px 10px 20px rgba(255, 0, 0, 0.5);
}
.ssr-buy:hover {
filter: brightness(1.2);
transform: translateY(-5px);
transition: 333ms ease-out;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Popup Styles */
.ssr-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
justify-content: center;
align-items: center;
}
.ssr-popup-content {
background: linear-gradient(135deg, #ffffff, #f0f0f0);
border-radius: 12px;
padding: 20px;
text-align: center;
width: 90%;
max-width: 400px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
position: relative;
}
.ssr-popup-content h2 {
font-size: 22px;
margin-bottom: 10px;
color: #ff4e4e;
text-transform: uppercase;
}
.ssr-popup-content p {
font-size: 14px;
color: #444;
margin-bottom: 20px;
line-height: 1.5;
}
.ssr-popup-buttons {
display: flex;
gap: 10px;
justify-content: center;
}
.ssr-popup-btn {
background: linear-gradient(90deg, #ff7f50, #ff4500);
color: #fff;
padding: 10px 15px;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
transition: 0.3s ease;
}
.ssr-popup-btn:hover {
background: #ff6347;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
transform: scale(1.05);
}
.ssr-download-btn {
background: linear-gradient(90deg, #32cd32, #228b22);
}
.ssr-download-btn:hover {
background: #2e8b57;
}
.ssr-popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
color: #555;
background: #eaeaea;
border-radius: 50%;
padding: 5px;
}
.ssr-popup-close:hover {
color: #000;
background: #d3d3d3;
}
</style>
<script>
function showPopup() {
document.getElementById('ssr-popup').style.display = 'flex';
}
function closePopup() {
document.getElementById('ssr-popup').style.display = 'none';
}
</script>
HOW TO USE
To implement this feature on your WordPress or Bloggerwebsite, simply copy and paste the provided code into your site’s HTML editor. The button will float on your pages, and users can interact with it effortlessly. No additional plugins or extensions are required—just the HTML, CSS, and JavaScript code provided..
WHY CHOOSE THIS DESIGN?
The floating button and popup design is created with user experience in mind. The animated gradient and floating position ensure the button stays noticeable without being intrusive. The added popup functionality provides clarity to users, offering them valuable information and clear paths to take the desired actions. This design also benefits content creators and online sellers, as it can be easily modified to suit any website’s needs—whether you're offering digital products, memberships, or exclusive content...
Notice
SSRTECH: This floating "Buy" button with a stylish popup is a versatile, user-friendly feature developed by SSRTech. Designed to enhance your website's interaction, this button ensures that users are engaged and informed with minimal disruption to their experience. Whether you're selling a product or sharing exclusive content, this feature offers an elegant way to guide users towards action.
CONCLUSION
Incorporating the floating "Buy" button with popup from SSRTECH into your website is an easy and effective way to increase user interaction, guide your visitors, and streamline the process of accessing exclusive content. This feature is designed to work perfectly with both WordPress and Blogger making it a go-to solution for webmasters seeking to enhance the user experience on their site..
All content on this website is protected by DMCA and is the intellectual property of SSRTECH. Copying, reproducing, or distributing our posts in any form is strictly prohibited! Legal action will be taken if there is any violation of these terms.
Important Note
This Template zip file is Password protected. If you want to know the password, please join our Telegram group and type #SSRTECH and send it.
✖