أكواد أزرار متميزة بتقنية css3
السلام عليكم ورحمة الله وبركاته
مع لغة التصميم css3 الجديدة والخارقة أصبح بإمكاننا عمل تصميمات متميزة باستخدام الأكواد
وبدون الاعتماد على الصور أحياناً
وأحببت أن أستعرض لكم اليوم كيفية صناعة بعض الأزرار المتميزة لموقع باستخدام هذه التقنية
الزر التالي عند الضغط عليه يخرج وهج بشكل متدرج
شكل الزر قبل الضغط
شكل الزر عند وقوف الماوس فوقه
الكود
يمكن تجربة الكود للمعاينة على الصفحة التالية
HTML محرر أكواد
انسخ الكود والصقه
( مع العلم أن المتصفحات القديمة لا تدعم ccs 3 ويفضل وجود متصفح حديث من firefox , google chrome , وبالنسبة لـ Internet Explorer فالتاسع يدعم css3 أما الإصدارات الأقدم لا تدعم )
صور الزر قبل وقوف الماوس فوقه
صور الزر عند وقوف الماوس فوقه
الكود :
جرب على هذه الصفحة : HTML محرر أكواد
يمكن إضافة بض التعديلات لإضافة الحركة كما يلي:
جرب بنفسك لترى النتيجة
ولاحظ عدم استخدام الصور في الأزرار كخلفية لهم
الموضوع حصري لطه سوفت والمصدر هنا
مع لغة التصميم css3 الجديدة والخارقة أصبح بإمكاننا عمل تصميمات متميزة باستخدام الأكواد
وبدون الاعتماد على الصور أحياناً
وأحببت أن أستعرض لكم اليوم كيفية صناعة بعض الأزرار المتميزة لموقع باستخدام هذه التقنية
الزر التالي عند الضغط عليه يخرج وهج بشكل متدرج
شكل الزر قبل الضغط
شكل الزر عند وقوف الماوس فوقه
الكود
TahaSoft.com
يمكن تجربة الكود للمعاينة على الصفحة التالية
HTML محرر أكواد
انسخ الكود والصقه
( مع العلم أن المتصفحات القديمة لا تدعم ccs 3 ويفضل وجود متصفح حديث من firefox , google chrome , وبالنسبة لـ Internet Explorer فالتاسع يدعم css3 أما الإصدارات الأقدم لا تدعم )
تطبيق ثاني:
صور الزر قبل وقوف الماوس فوقه
صور الزر عند وقوف الماوس فوقه
الكود :
TahaSoft
جرب على هذه الصفحة : HTML محرر أكواد
يمكن إضافة بض التعديلات لإضافة الحركة كما يلي:
TahaSoft
جرب بنفسك لترى النتيجة
ولاحظ عدم استخدام الصور في الأزرار كخلفية لهم
الموضوع حصري لطه سوفت والمصدر هنا
سلمت اناملك اخي زهير
درس بمنتهى الروعة
جزيت خيراً
شكرا لك أخي العزيز