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

File Size: 120 KB
Views Total: 24410
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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.