How to Create a Timer Download Button without Plugin for Your Website

11 November 202329 March 2023

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.

Table of Contents

Understanding the 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=”https://link.urlearn.site/AHoe” 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’;
}

See also Happy Diwali Premium Wishing Script For Blogger | Diwali Script Free Download 2024

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.

See also How To Show Post Last Updated/Modified date without any Plugin?

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

Related Posts: