As a website owner, you may want to offer your visitors a timer download button to enhance their user experience. This button can help them keep track of time while working on their tasks and add a sense of urgency to their work. In this article, we will discuss how to create a timer download button for your website.
Need for a Timer Download Button
A timer download button is a useful tool that can help visitors track the time they spend on your website. This can be particularly helpful for websites that provide resources or services that require time management. For example, if your website provides online courses, a timer download button can help students keep track of their progress.
Demo: [timer_download url=”#” time=”30″ text=”Download”]
Step-by-Step Guide to Create a Timer Download Button
Creating a timer download button for your website is a straightforward process. Follow these steps:
Watch Full Video: How to make Timer Download Button without Plugin
Funtion.php Full Code:
function timer_download_button( $atts ) {
$atts = shortcode_atts( array(
‘url’ => ”,
‘time’ => 30,
‘text’ => ‘Download Now’,
‘style’ => ‘default’
), $atts );
$button_classes = ‘timer-download-button’;
$timer_classes = ‘countdown-timer’;
if ($atts[‘style’] == ‘default’) {
$button_classes .= ‘ timer-default’;
} elseif ($atts[‘style’] == ‘primary’) {
$button_classes .= ‘ timer-primary’;
$timer_classes .= ‘ primary-timer’;
} elseif ($atts[‘style’] == ‘secondary’) {
$button_classes .= ‘ timer-secondary’;
$timer_classes .= ‘ secondary-timer’;
}
ob_start(); // Start buffering output
?>
<a href=”#” class=”<?php echo $button_classes; ?>”
data-url=”<?php echo esc_url( $atts[‘url’] ); ?>”
data-time=”<?php echo absint( $atts[‘time’] ); ?>”
style=”color: white;”> <!– Set the font color to white –>
<?php echo esc_html( $atts[‘text’] ); ?><span class=”<?php echo $timer_classes; ?>”
data-time=”<?php echo absint( $atts[‘time’] ); ?>”></span>
</a>
<script>
document.addEventListener(“DOMContentLoaded”, function() {
var buttons = document.querySelectorAll(“.timer-download-button”);
buttons.forEach(function(button) {
var countdown = button.querySelector(“.countdown-timer”);
var url = button.dataset.url;
var time = parseInt(button.dataset.time);
button.addEventListener(“click”, function(e) {
e.preventDefault();
var interval = setInterval(function() {
time–;
countdown.textContent = time;
if (time === 0) {
clearInterval(interval);
window.location.href = url; // Change location.href to window.location.href
}
}, 1000);
});
});
});
</script>
<?php
return ob_get_clean(); // Return and clear the buffer
}
add_shortcode( ‘timer_download’, ‘timer_download_button’ );
CSS Code full Code:
/* Timer Button Code */
.timer-download-button {
font-size: 14px;
padding: 10px 25px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white; /* Set font color to white */
box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
border-radius: 120px;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 51%, #1FA2FF 100%);
text-decoration: none; /* Ensure no underline for links */
}
.timer-download-button:hover {
background-color: #85ffc2;
border: 1px solid #265c9e;
box-shadow: 0 3px 0 #265c9e;
}
.countdown-timer {
background-position: right center;
color: white;
text-decoration: none;
}
Download Text File:
[timer_download url=”https://daniblogs.com/BF/483652hs” time=”30″ text=”Download”]
Best Practices for Using a Timer Download Button
When using a timer download button on your website, there are a few best practices to keep in mind:
Keep the Timer Simple
Make sure the timer is easy to understand and use. A simple countdown timer with clear instructions is all that is needed.
Use the Timer to Enhance User Experience
Ensure that the timer adds value to the user experience. It should help visitors achieve their goals, not just add a fancy feature to your website.
Place the Timer in a Visible Location
Place the timer in a visible location on your website, where visitors can easily see it. It should not be hidden or difficult to find.
Customize the Timer to Match Your Website’s Theme
Customize the timer to match your website’s theme to create a cohesive look and feel. This will make the timer feel like a natural part of your website.
Conclusion
A timer download button can be a valuable addition to your website, helping visitors track time and improve their productivity. By following the steps outlined in this article, you can easily create a timer download button for your website. Remember to keep the timer simple, use it to enhance user experience, place it in a visible location, and customize it to match your website’s theme.
FAQs
How can a timer download button help my website visitors?
A timer download button can help visitors keep track of time while working on their tasks and add a sense of urgency to their work.
Can I customize the appearance of the timer download button?
Yes, you to customize the appearance of the timer to match your website’s theme.
Are there any best practices for using a timer download button?
Yes, best practices
