تصميم زر التحميل بلغة 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>

☷✎

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

تعليقات

إرسال تعليق

تطبيق حساب فاتورة الغاز والكهرباء. في الجزائر. أونلاين

فتح حساب gmail جديد ( مع شرح مفصل بالصور)

الدرس الاول - قالب بلوجر خام | دورة تصميم قالب بلوجر

كيفية جلب البيانات من خلاصة Google Blogger باستخدام JavaScript