تصميم زر التحميل بلغة html-css

ستنعلم في هذا الدرس كيفية تصميم زرالتحميل باستخدام مكتبة material-icons وهي الايقونات المستخدمة في المواقع المشهورة مثل يوتيوب ومواقع جوجل.

يمكنك معاينة النموذج التالي، كما يمكن التعديل عليه بشكل مباشر للحصول على النتيجة التي ترغب فيها، واذا قمت بعمل خطأ ما قم باعادة تحميل الصفحة وستعود الى الوضع الافتراضي.

<!doctype html>
<html dir="rtl">
  <head>
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    <style>
      .material-icons{vertical-align:middle} .material-icons:hover{transform:rotate(360deg); transition:0.5s}
      a{color:white; text-decoration:none} button{background:#016886; border:0px; border-radius:3px; }
      
    </style>
        </head>
  <body>
      <button>
        <a href="#">تحميل <i class="material-icons">file_download</i> </a>
    </button>
    </body>
     </html>

شارك المقال: