How to create a download link with CSS?
The download link is used to download any item to the local machine from a website. We can create a customized download link by using CSS properties.
Creating download link
The download attribute is used within <a> tag to download the targeted link on click. We can use different properties to customize this link.
- Add
background-color to the link
- Remove the underline using
text-decoration:none.
- Use
border, padding, font-size to customize the link.
Example: Creating a download link using CSS
Here, we created a download link and applied some CSS styling to it to make it nice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
a {
background-color: green;
text-decoration: none;
font-size: 20px;
border: 2px solid blue;
padding: 10px;
}
a:hover{
background-color: #cccccc;
}
</style>
</head>
<body>
<h2> Download link </h2>
<p> click to download item </p>
<a href="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627300314-101156.png" download>Download</a>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding download icon to download link
We can also add a download icon to the link using an external library. Here, we will use Font Awesome to add the download icon to links.
Conclusion
In this tutorial, we have learned to create a download link. We can use CSS properties like background-color, padding, text-decoration to customize links. In addition to that, we can use an external library to add download icons to it.
