Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style download buttons with CSS?
The download icon on the download buttons plays a key role in styling the buttons. This allows a user navigating the website in understanding that this is a download button and on clicking the file will download. The icons can be included on a web page with Font Awesome. For that, to begin with you need to set the CDN link in the <link> element. Let us see how to style download buttons.
Set the CDN for the icon
To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Create a button
A button is created on a web page using the <button> element −
<button><i class="fa fa-download"></i> DOWNLOAD NOW</button>
Place the icons
The icon is placed on the button by placing the <i> within the <button> element −
<i class="fa fa-download">
Style the download button
The following is the code to style the download button with CSS. The cursor property is set to the pointer property to make it look like link −
button{
background-color: rgb(78, 15, 129);
border: none;
color: white;
margin-left:33%;
padding: 12px 30px;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button{
background-color: rgb(78, 15, 129);
border: none;
color: white;
margin-left:33%;
padding: 12px 30px;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
background-color: rgb(42, 7, 82);
}
</style>
</head>
<body>
<h1>Download Button Styling Example</h1>
<button><i class="fa fa-download"></i> DOWNLOAD NOW</button>
</body>
</html>
Style the download button with full-width
In this example, the download button is set with full-width using the width property with the value 100%. The text on the button is set in the center using the text-align property with the value center −
button{
background-color: rgb(78, 15, 129);
border: none;
color: white;
text-align: center;
width: 100%;
padding: 12px 30px;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button{
background-color: rgb(78, 15, 129);
border: none;
color: white;
text-align: center;
width: 100%;
padding: 12px 30px;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
background-color: rgb(42, 7, 82);
}
</style>
</head>
<body>
<h1>Download Button Styling Example</h1>
<button><i class="fa fa-download"></i> DOWNLOAD NOW</button>
</body>
</html>
378 Views
