PUBLISHED ON: AUGUST 16, 2021
How to style download button with CSS?
Download buttons are very common on the webpage and used to download files from the server. This download button can be styled using various CSS properties. It can also be added with a download icon. In this tutorial. we will learn to style the download button with CSS.
The Download button
The <button> element is used to create a download button. We can use different properties to style a download button like
background-color: It is used to add color to the button.padding: It is used to add space to the buttons.color: You can add a different color to the inner text or icon of the button.width: Set the width of the button. It can be of full width:100% or any other width.
Example: Styling the download button
Here, we have a simple download button with some text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
button{
background-color: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.btn {
width: 100%;
}
</style>
</head>
<body>
<h2> Download Button </h2>
<button class="btn">Download </button>
<h2> Download button</h2>
<button >Download </button>
</body>
</html>
Output
Here is the output of the above code.
Example: Download button with icon
We can also add the icon to the download button. Use the external library to do so. Here, we have used the Font Awesome library to add a download icon.
Conclusion
In this tutorial, we have styled a Download button with CSS. We can add icons to it using an external library. You can customize the width of the button too.
