How To Create HTML Download Buttons

Step 1) Add HTML:

Add an icon library, such as font awesome, and append icons to HTML buttons:

Example

Download

---

Step 2) Add CSS:

Example

/* Style buttons */

.btn {
background-color: DodgerBlue;
border-radius: 40px;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}

/*Darker background on mouse-over*/

.btn:hover {
    background-color: RoyalBlue;
}

Try it yourself editor textarea, iframe { border: 2px solid #ddd; height: 500px; width: 100%; }

Code Hello		Try It Yourself! .btn { background-color: DodgerBlue; border-radius: 40px; color: white; padding: 12px 30px; cursor: pointer; font-size: 20px; } /*Darker background on mouse-over*/ .btn:hover { background-color: RoyalBlue; } Download .	Output

function runCode() { var content = document.getElementById(‘sourceCode’).value; var iframe = document.getElementById(‘targetCode’); iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument; iframe.document.open(); iframe.document.write(content); iframe.document.close(); return false; } runCode();