ازرار تنزيل ومشاركه ورفع عبر HTML 5

بإستخدام أكواد HTML و Less من Css تستطيع الحصول علي ازرار مختلفه رائعه مثل التحميل ورفع وتقيم ومشاركه وجميع الأزرار متحركه عند النقر عليها بمظهر رائع كما يمكنك التعديل علي الأكواد إذا كان لديك خلفيه بسيطه عن أكواد HTML لتغيرهم إلي ما تريد والأزرار متناسقه علي جميع أحجام الشاشات مثل الهاتف والحاسوب.

كيفيه فعل ذلك؟

1- قم بوضع اكواد css التاليه فوق وسم </head> والرابط يحتوي علي ألوان الأزرار يمكنك التعديل عليها.

<style> @import "https://bit.ly/2LS9lsv" </style>

2- إستخدام أكواد لغه الترميز HTML قم بوضع الأكواد التاليه في المكان الذي تريده يظهر به مع تعديل رابط yehia.online إلي رابط الخاص بك للزر.

<div class="wrapper"> <div class="intro"> <h1> Yehia يمكنك التحميل من موقع </h1> </div> <div class="drives"> <a class="usb-drive" href="#" title="Download"> <div class="casing"> Download</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-cloud-download"></i> </div> </a> <a class="usb-drive purple" href="#" title="Download"> <div class="casing"> Download</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-download"></i> </div> </a> <a class="usb-drive red" href="#" title="Share"> <div class="casing"> Share</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-share"></i> </div> </a> <a class="usb-drive orange" href="#" title="Upload"> <div class="casing"> Upload</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-cloud-upload"></i> </div> </a> <a class="usb-drive green" href="#" title="Download"> <div class="casing"> Upload</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-upload"></i> </div> <a class="usb-drive carbon" href="#" title="Stash"> <div class="casing"> Stash</div> <div class="connector"> <div class="inner"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </div> </div> <div class="cap"> <i class="fa fa-star"></i> </div> </a>

يمكنك تحميل الأكواد كامله :

 

Yehia Online

Start

 

 

إسم الملف buttanT.html الملف بحجم 2 KB

إذا لم يبدأ التحميل أنقر علي {..Start..}If the download does not start, click