Html file download icon - for the
Html file download icon - have
How TO - Download Button
Learn how to style download buttons with CSS.
Auto width:
Full width:
Try it Yourself »How To Create Download Buttons
Step 1) Add HTML:
Add an icon library, such as font awesome, and append icons to HTML buttons:
Example
<!-- Add icon library -->
<link rel="stylesheet" href="www.cronistalascolonias.com.ar">
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn" style="width%"><i class="fa fa-download"></i> Download</button>
<link rel="stylesheet" href="www.cronistalascolonias.com.ar">
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn" style="width%"><i class="fa fa-download"></i> Download</button>
Step 2) Add CSS:
Example
/* Style buttons */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
Try it Yourself ».btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
Tip: Go to our Icons Tutorial to learn more about icons.
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
-