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)


Add HTML:



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:

                
                
                
             <style>
 .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;
}


</style>
                
                
              
                
            



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.




Navigation