Add Download Button To Image With JavaScript - add-download-btn.js

add-download-btn.js is a small and easy-to-use jQuery plugin that creates a custom button on your image to force the browser to download the image file on click.

How to use it:

1. Download and put the add-download-btn.js after the latest jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="add-download-btn.js"></script>

2. Call the function on the img tag and specify the text and classname of the download button.

<img src="example.jpg">

var text = "DOWNLOAD";
var className = "btn";

$("img").addDownloadBtn(text, className);

3. Customize the image download button using your own CSS rules as these:

.btn {
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 3px;
  border: solid 1px #C0392B;
  background-color: #E74C3C;
  text-decoration: none;
  color: white;
}

.btn:hover {
  opacity: .9;
}

.btn:active {
  opacity: 1;
}

---

This awesome jQuery plugin is developed by theuves. For more Advanced Usages, please check the demo page or visit the official website.