زهير طه

32

7,196

أكواد أزرار متميزة بتقنية css3

السلام عليكم ورحمة الله وبركاته
مع لغة التصميم css3 الجديدة والخارقة أصبح بإمكاننا عمل تصميمات متميزة باستخدام الأكواد
وبدون الاعتماد على الصور أحياناً
وأحببت أن أستعرض لكم اليوم كيفية صناعة بعض الأزرار المتميزة لموقع باستخدام هذه التقنية

الزر التالي عند الضغط عليه يخرج وهج بشكل متدرج

شكل الزر قبل الضغط


شكل الزر عند وقوف الماوس فوقه



الكود





TahaSoft.com




يمكن تجربة الكود للمعاينة على الصفحة التالية
HTML محرر أكواد
انسخ الكود والصقه
( مع العلم أن المتصفحات القديمة لا تدعم ccs 3 ويفضل وجود متصفح حديث من firefox , google chrome , وبالنسبة لـ Internet Explorer فالتاسع يدعم css3 أما الإصدارات الأقدم لا تدعم )



تطبيق ثاني:



صور الزر قبل وقوف الماوس فوقه



صور الزر عند وقوف الماوس فوقه



الكود :






TahaSoft




جرب على هذه الصفحة : HTML محرر أكواد

يمكن إضافة بض التعديلات لإضافة الحركة كما يلي:






TahaSoft



جرب بنفسك لترى النتيجة
ولاحظ عدم استخدام الصور في الأزرار كخلفية لهم

الموضوع حصري لطه سوفت والمصدر هنا

التعليقات (2)

صمت العواصف     

سلمت اناملك اخي زهير
درس بمنتهى الروعة
جزيت خيراً

webNeat     
موضوع مميز و شرح جميل
شكرا لك أخي العزيز