How to Create Image and PDF Download Link with CSS

You can easily create a downloadable link for any image and pdf file. You can do this in any platform with bare CSS and in WordPress environment as well. In this tutorial, I’m going to share this trick and strategy with simplified example.

There is no complication in creating such links. Anybody having a decent understanding of CSS, can hit the target. But many are not aware of such links and also not aware that this type of linking may be important in their sites. This help is only for them.

In case of WordPress, you need to take an HTML Block first and then implement the process. So, let’s proceed-

How to create an image download link with CSS

For this, do the followings:

• Take an img element with essential attributes including src. This image is the clickable link. So you can define width and height as you wish.
• Wrap the img with a element with necessary attribute including href. In addition, use download attribute with no value. This href value links to the original image and directs the clickers to download-popup.
• Actually href and src values are the same image url.

Look at the Code:

CODE

<a href="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg" 
download> 
<img src="https://www.netplanter.com/wp-content/uploads/2020/02/ORCHID-1.jpg" style="width:100px; height:100px;">
</a>

OUTPUT

Now, give clicking the image a try. And enjoy!!

Image download link in WordPress

How to create an PDF download link with CSS

• Take an a element href attribute. Also add download attribute with no value. Put PDF file url as href attribute value.
• In the text field, between <a> and </a> tag, write “Download [File_Name] as .pdf”. All is OK.

In our example, we’re going to use a .pdf file named ‘Math_suggestion-2020.pdf’. Let’s see the code.

CODE

<a href="https://www.netplanter.com/wp-content/uploads/2020/02/Math_suggestions-2020.pdf" 
download> 
Download Math_suggestions-2020 as .pdf
</a>

OUTPUT

PDF download link in WordPress

In Classic Editor, click Text mode and insert the code in the point you want the link to appear. That’s all.

In Gutenburg Editor, do the followings:

• Click ‘+’ sign to add block.
• In Common block group, click ‘file’.
• In the inserted file block, click Upload to upload your pdf file or click Media Library to select one from library.
• Click Select and all is done. With file name, a link will be created automatically with a Download button.

See below:

Hope you enjoyed. Comment please!