Black Neon Download Button With Progress bar and 30 Second Timer Source Code For Free

Black Neon Download Button With Progress bar and 30 Second Timer Source Code For Free

How To Use Download button code in WordPress

To implement the download button code in WordPress, follow these steps:

  1. Navigate to the WordPress Admin Dashboard: Log in to your WordPress website and go to the admin dashboard.
  2. Create a New Page or Edit an Existing Page/Post: Decide where you want to add the download button. You can either create a new page or edit an existing one.
  3. Switch to Text Editor Mode: When creating or editing the page/post, switch to the text editor mode instead of the visual editor. This allows you to directly input HTML, CSS, and JavaScript code.
  4. Insert HTML Code: Paste the HTML code for the download button into the text editor. Make sure to adjust the file path in the JavaScript code to point to the correct location of your file.
  5. Add CSS Code (Optional): If you want to customize the appearance of the button, you can add the CSS code to your WordPress theme’s custom CSS area. Go to Appearance » Customize » Additional CSS and paste the CSS code there.
  6. Add JavaScript Code (Optional): Similarly, you can add the JavaScript code to your WordPress theme. Some themes offer a custom JavaScript area in the theme settings. Alternatively, you can use a plugin like “Header and Footer Scripts” to add JavaScript to the header or footer of your site.
  7. Preview and Publish: Preview the page/post to ensure that the download button appears as expected. Once you’re satisfied, publish the page/post.
  8. Test: Test the download button by clicking on it to ensure that it initiates the download of the specified file.
  9. Adjust as Needed: If there are any issues or if you want to make further adjustments, you can always go back to the page/post editor and make changes as necessary.

By following these steps, you should be able to add a download button to your WordPress website using HTML, CSS, and JavaScript code.

how to use Download button code in blogger

To use the combined HTML, CSS, and JavaScript code in a Blogger post, you can follow these steps:

  1. Go to Blogger Dashboard: Log in to your Blogger account and navigate to the Blogger dashboard.
  2. Create a New Post or Edit an Existing Post: Decide where you want to add the download button. You can either create a new post or edit an existing one.
  3. Switch to HTML Mode: When creating or editing the post, switch to the HTML mode instead of the Compose mode. This allows you to directly input HTML, CSS, and JavaScript code.
  4. Insert Combined Code: Paste the combined HTML, CSS, and JavaScript code into the HTML editor. Make sure to adjust the file path in the JavaScript code to point to the correct location of your file.
  5. Preview and Publish: Preview the post to ensure that the download button appears as expected. Once you’re satisfied, publish the post.
  6. Test: Test the download button by clicking on it to ensure that it initiates the download of the specified file.

By following these steps, you should be able to add a download button to your Blogger post using the combined HTML, CSS, and JavaScript code. Remember to adjust the file path in the JavaScript code to match the location of your file.

Download Button with Timer

Button Demo




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Download Button with Timer</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <center>
    <h2>Button Demo</h2>
    <button id="downloadButton">Download</button><br><br>
  </center>

  <div id="loadingContainer">
    <div id="loadingBar"></div>
  </div><br>
  <center>
    <p id="waitMessage"></p>
  </center>

  <script src="script.js"></script>
</body>
</html>
/* Neon button styling */
#downloadButton {
  background-color: #000;
  border: 2px solid #0f0; /* Green */
  color: #0f0; /* Green */
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#downloadButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f0; /* Green */
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#downloadButton:hover::before {
  opacity: 0.5;
}

#downloadButton:hover {
  color: #fff;
  border-color: #fff;
}

/* Loading container styling */
#loadingContainer {
  width: 100%;
  height: 10px;
  background-color: #000;
  border-radius: 5px;
  overflow: hidden;
  display: none;
}

/* Loading bar styling */
#loadingBar {
  background-color: #4CAF50;
  width: 0;
  height: 100%;
  transition: width 0.3s;
}

/* Wait message styling */
#waitMessage {
  margin-top: 10px;
  display: none;
}
document.getElementById("downloadButton").onclick = function() {
  var button = document.getElementById("downloadButton");
  var loadingContainer = document.getElementById("loadingContainer");
  var loadingBar = document.getElementById("loadingBar");
  var waitMessage = document.getElementById("waitMessage");
  var width = 0; // Set initial width to 0
  button.disabled = true; // Disable the button
  button.innerText = "Generating link..."; // Change button text
  loadingContainer.style.display = "block"; // Show loading container
  waitMessage.style.display = "block"; // Show wait message
  waitMessage.innerText = "Please wait for "; // Set wait message

  // Start the timer
  var seconds = 30;
  var increment = 100 / seconds; // Calculate the increment per second
  var timer = setInterval(function() {
    if (width >= 100) {
      clearInterval(timer);
      button.disabled = false; // Enable the button
      button.innerText = "Download"; // Restore button text
      waitMessage.innerText = ""; // Clear wait message
    } else {
      width += increment;
      loadingBar.style.width = width + '%';
      waitMessage.innerText = "Please wait for " + seconds + " seconds"; // Update wait message
      seconds--;
    }
  }, 1000); // 1000 milliseconds = 1 second

  // After 30 seconds (30000 milliseconds), initiate the download
  setTimeout(function() {
    // Replace 'path_to_file' with the actual path to your file
    window.location.href = 'path_to_file';
  }, 30000);
};

Replace 'path_to_file' in the JavaScript code with the actual path to your file that you want to be downloaded when the button is clicked. Ensure that the file is accessible through the provided path.