ساخت انواع دکمه دانلود

در این مقاله می آموزیم که چطور با استفاده از کد CSS , Html دکمه های دانلود (Download Buttons) ایجاد کنیم.

به دکمه های HTML ، دستور icon library مانند Font Awesome را اضافه کنید:

قدم اول : کد HTML را اضافه کنید.
مثال :

                                 
                

                                    
                 Download

                                    
                 Download
                

قدم دوم :   کد CSS را اضافه کنید.
مثال :

                               /* 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;
                }
                

<h2>استایل دکمه های دانلود</h2>

<p>Auto width:</p>

<button class="btn"><i class="fa fa-download"></i> دانلود</button>

<p>Full width:</p>

<button class="btn" style="width:100%"><i class="fa fa-download"></i> دانلود</button>

عکس دکمه های دانلود (Download Buttons)