0 CSS3 أزرار اللون الأزرق لبلوغر

في هذا البرنامج التعليمي إم ستعمل شرح كيفية إضافة أنيق زر اللون الأزرق ل blogger.you يمكن أن تحل محل
الزر الافتراضي الخاص بك مع هذا button.Im باستخدام كس و هتمل لهذا البرنامج التعليمي يمكنك التحقق من بلدي
مقالات الأزرار السابقة هنا

DEMO

1. قم بتسجيل الدخول إلى حساب المدون وانقر على القائمة المنسدلة.

2. الآن حدد " قالب " مثل أدناه.

3. الآن يمكنك ان ترى لايف على بلوق، انقر فوق تحرير هتم L زر "

4. الآن انقر فوق زر متابعة .

5. ابحث عن هذا الرمز باستخدام كترل + F ]]> </ b: سكين>

6. لصق أدناه رمز قبل ]]> </ b: الجلد> الشفرة

  اللا-BTN { 
      -webkit الحدود نصف قطرها: 10px؛ 
      -moz الحدود نصف قطرها: 10px؛ 
      الحدود بين دائرة نصف قطرها: 10px؛ 
      بادينغ: 10px 30px 10px 20px؛ 
      الموقف: النسبية. 
      تعويم: اليسار؛ 
      العرض محجوب؛ 
      إخفاء الفائض؛ 
      هامش: 10px؛ 
      خلفية: # 9cedef. 
      باكغروند: -webkit-غرادينت (لينير، ليفت توب، ليفت بوتوم، كولور-ستوب (# b7f2f4،0)، كولور-ستوب (# 7ce7ea، 1))؛ 
      باكغروند: -webkit-لينير-غرادينت (توب، # b7f2f4 0٪، # 7ce7ea 100٪)؛ 
      باكغروند: -moz-لينير-غرادينت (توب، # b7f2f4 0٪، # 7ce7ea 100٪)؛ 
      باكغروند: -o-لينير-غرادينت (توب، # b7f2f4 0٪، # 7ce7ea 100٪)؛ 
      باكغروند: لينير-غرادينت (توب، # b7f2f4 0٪، # 7ce7ea 100٪)؛ 
      فيلتر: بروجيد: DXImageTransform.Microsoft.gradient (ستارتكولورستر = '# b7f2f4'، إندكولورستر = '# 7ce7ea'، غرادينتيب = 0)؛ 
      بوردر: 1px سوليد # 90c6c8؛ 
      بوردر-كولور: # 90c6c8 # 78bdc0 # 65b6ba؛ 
      -webkit-بوكس-شادو: 0px -5px 0px 0px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)؛ 
      -moz-بوكس-شادو: 0px -5px 0px 0px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)؛ 
      بوكس-شادو: 0px -5px 0px 0px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)؛ 
      -webkit-ترانزيتيون: كل 0.2 ثانية الخطية. 
      -moz-ترانزيتيون: كل 0.2 ثانية الخطية. 
      -o-ترانزيتيون: كل 0.2 ثانية الخطية. 
      الانتقال: جميع 0.2 ثانية الخطية. 
  } 
  اللا-BTN-رمز { 
      فونت-فاميلي: 'ويبسيمبولسريغولار'، كورسيف؛ 
      اللون: # 437b7d. 
      تكست-شادو: 0 1px 0 # bef3f5؛ 
      FONT-SIZE: 20px؛ 
      الموقف: مطلقة؛ 
      اليسار: 20px؛ 
      العرض: 20px؛ 
      مواءمة النصوص: المركز؛ 
      خط الطول: 32px؛ 
      -webkit-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -moz-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -o-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      الانتقال: جميع 0.3s سهولة في الخروج؛ 
  } 
  اللا-BTN النص { 
      FONT-SIZE: 20px؛ 
      اللون: # 437b7d. 
      تكست-شادو: 0 1px 0 # bef3f5؛ 
      خط الطول: 16px؛ 
      الخط الوزن: جريئة. 
      فونت-فاميلي: "ميرياد برو"، "تريبوشت مس"، سانس-شريف؛ 
      العرض محجوب؛ 
  } 
  اللا-BTN الانزلاق النص { 
      فونت-فاميلي: أريال، سانس-شريف؛ 
      FONT-SIZE: 10px؛ 
      الرسالة تباعد: 1PX. 
      النص تحويل: الأحرف الكبيرة. 
      اللون: # 555؛ 
      تكست-شادو: 0px 1px 1px رغبا (255،255،255،0.9)؛ 
  } 
  اللا-BTN: تحوم { 
      -webkit-تحويل: مقياس (1.05)؛ 
      -moz-تحويل: مقياس (1.05)؛ 
      -ms-تحويل: مقياس (1.05)؛ 
      -o-تحويل: مقياس (1.05)؛ 
      تحويل: مقياس (1.05)؛ 
  } 
  .a-بتن: هوفر .a-بتن-سيمبول { 
      التعتيم: 0.5. 
      -webkit-تحويل: تدوير (360deg)؛ 
      -moz-تحويل: تدوير (360deg)؛ 
      -ms-تحويل: تدوير (360deg)؛ 
      -o-تحويل: تدوير (360deg)؛ 
      تحويل: تدوير (360deg)؛ 
  } 
  اللا-BTN: نشطة { 
      -webkit-تحويل: مقياس (0.95)؛ 
      -moz-تحويل: مقياس (0.95)؛ 
      -ms-تحويل: مقياس (0.95)؛ 
      -o-تحويل: مقياس (0.95)؛ 
      تحويل: مقياس (0.95)؛ 
      -webkit-بوكس-شادو: 0px 0px 0px 1px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)، 0px 1px 1px 2px #fff؛ 
      -moz-بوكس-شادو: 0px 0px 0px 1px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)، 0px 1px 1px 2px #fff؛ 
      بوكس-شادو: 0px 0px 0px 1px # 458a8c، 0 1px 1px # d5d5d5، إنزيت 0 1px 0 رغبا (255،255،255،0.8)، 0px 1px 1px 2px #fff؛ 
  } 

 

7. انتقل إلى المدون وانقر على المنسدلة مثل الخطوة 1 وحدد تخطيط

8- انقر على إضافة أداة وحدد "هتمل / جافاسكريبت "

9. لصق التعليمات البرمجية أدناه.

 
  <ديف كلاس = "بوتون-ورابر"> 
                      <a href="#" class="a-btn"> 
                          <سبان كلاس = "a-بتن-سيمبول"> </ سبان> 
                          <سبان كلاس = "a-بتن-تكست"> تنزيل الآن </ سبان> 
                         <سبان كلاس = "a-بتن-سليد-تكست"> برامج بلوجر التعليمية </ سبان> 
                      </A> 
                      <a href="#" class="a-btn"> 
                          <سبان كلاس = "a-بتن-سيمبول"> </ سبان> 
                          <سبان كلاس = "a-بتن-تكست"> تنزيل الآن </ سبان> 
                          <سبان كلاس = "a-بتن-سليد-تكست"> برامج بلوجر التعليمية </ سبان> 
                      </A> 
                      <a href="#" class="a-btn"> 
                          <سبان كلاس = "a-بتن-سيمبول"> </ سبان> 
                          <سبان كلاس = "a-بتن-تكست"> تنزيل الآن </ سبان> 
                          <سبان كلاس = "a-بتن-سليد-تكست"> برامج بلوجر التعليمية </ سبان> 
                      </A> 
                      <a href="#" class="a-btn"> 
                          <سبان كلاس = "a-بتن-سيمبول"> </ سبان> 
                          <سبان كلاس = "a-بتن-تكست"> تنزيل الآن </ سبان> 
                          <سبان كلاس = "a-بتن-سليد-تكست"> برامج بلوجر التعليمية </ سبان> 
                      </A> 
                  </ div> 
 

* استبدال زر ورل

10. الآن حفظ القالب الخاص بك. انتهيت.