Learn to code - How To create Download Button with html and css

Auto width:

Full width:

Try yourself >>

Learn to create download button code using HTML and CSS

Part 1

position the font awesome library with other scripts, so you can import the fonts. (Click try yourself for more details)


Code Example:

               <p>Auto width:</p><br>

                      <button class="downbutton"><i class="fa fa-download"></i> Download</button>

                      <br> <br>
                      <p>Full width:</p> <br>

                      <button class="downbutton" style="width:100%"><i class="fa fa-download">
                      </i> Download</button>

Add CSS:

Code Example:

 .downbutton {
  background-color: #125688;
  color: white;
  border: none; 
  padding: 10px 26px;
  font-size: 18px;
  cursor: pointer;


/* style hover with mouse */
.downbutton:hover {
  background-color: RoyalBlue;


Try yourself >>

learn to code easily and free, our main goal is to allow students to learn Programming courses and other online coding classes in one place, free and easy.