0 CSS3 دائرة تأثير أزرار نمط لبلوجر

في هذا المنصب، إم شرح، كيفية إضافة زر الرسوم المتحركة رهيبة لبلوق الخاص بك.أنا باستخدام كس و هتمل لهذا tutorial.You يمكن التحقق، صفحة تجريبي حسب الرابط أدناه. هذا من السهل إضافة إلى المدونين. مقالات الأزرار السابقة 

عرض 

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

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

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

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

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

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

  اللا-BTN { 
      العرض: 60px؛ 
      الطول: 60px؛ 
      -webkit الحدود نصف قطرها: 50٪؛ 
      -moz الحدود نصف قطرها: 50٪؛ 
      الحدود بين دائرة نصف قطرها: 50٪؛ 
      العرض محجوب؛ 
      هامش: 20px؛ 
      تعويم: اليسار؛ 
      خلفية: # f0ad4e. 
      الموقف: النسبية. 
      -webkit-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px 0px 1px 8px رغبا (188، 188، 188، 0.4)، 0px 0px 0px 9px #fff؛ 
      -moz-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px 0px 1px 8px رغبا (188، 188، 188، 0.4)، 0px 0px 0px 9px #fff؛ 
      بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنسيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px 0px 1px 8px رغبا 188، 188، 188، 0.4)، 0px 0px 0px 9px #fff؛ 
      -webkit-ترانزيتيون: آل 0.3s لينير؛ 
      -moz-ترانزيتيون: آل 0.3s لينير؛ 
      -o-ترانزيتيون: جميع 0.3s الخطية. 
      الانتقال: جميع 0.3s الخطية. 
  } 
  .a-بتن سبان { 
      عرض: الجدول الخلية؛ 
      العرض: 40px؛ 
      الطول: 40px؛ 
      الحشو: 10px؛ 
      مواءمة النصوص: المركز؛ 
      محاذاة رأسية: وسط. 
      FONT-SIZE: 16px؛ 
      اللون: # الاتحاد الفرنسي. 
      تكست-شادو: 0px 1px 1px # A03F16؛ 
      فونت-فاميلي: "أرفو"، "ميرياد برو"، "تريبوشت مس"، سانس-شريف؛ 
      -webkit-ترانزيتيون: آل 0.3s لينير؛ 
      -moz-ترانزيتيون: آل 0.3s لينير؛ 
      -o-ترانزيتيون: جميع 0.3s الخطية. 
      الانتقال: جميع 0.3s الخطية. 
  } 
  .a-بتن سبان: نث-تشيلد (1)،  
  .a-بتن سبان: نث-تشيلد (3) { 
      الموقف: مطلقة؛ 
      قمة: 0px؛ 
      اليسار: 0px؛ 
      FONT-SIZE: 16px؛ 
      خط الطول: 19px؛ 
      التعتيم: 0؛ 
  } 
  .a-بتن سبان: نث-تشيلد (1) { 
      باكغروند: ترانزبارنت ورل (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJL3whReyGUs873SK63T7FSuoEAzwQDdEmk-S9VNj5UlbwernKv9gY10aV-zPmmP8aw9yD9hX98AaJGPVoXTtHyoOP4pMZWW6GOVXPgSRHOkx_xZYowUeTqD6BUi5eXSfpYBMkXSdZSZY/s1600/star.png) نو-ريبيت سينتر سينتر؛ 
      التعتيم: 0.2. 
  } 
  اللا-BTN: تحوم { 
      باكغروند: رغبا (170، 77، 27، 0.6)؛ 
      -webkit-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 1px 4px 5px 8px رغبا (188، 188، 188، 0.6)، 0px 0px 0px 9px #fff؛ 
      -moz-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 1px 4px 5px 8px رغبا (188، 188، 188، 0.6)، 0px 0px 0px 9px #fff؛ 
      بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنسيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 1px 4px 5px 8px رغبا 188، 188، 188، 0.6)، 0px 0px 0px 9px #fff؛ 
  } 
  .a-بتن: هوفر سبان: نث-تشيلد (3) { 
      التعتيم: 1؛ 
  } 
  .a-بتن: هوفر سبان: نث-تشيلد (2) { 
      أوباسيتي: 0؛  
      -webkit-ترانسفورم: سكيل (0)؛ 
      -moz-ترانسفورم: سكيل (0)؛ 
      ترانسفورم: سكيل (0)؛ 
  } 
  .a-بتن: هوفر سبان: نث-تشيلد (1) { 
      -webkit الرسوم المتحركة: تدوير 1S الخطية. 
      -moz الرسوم المتحركة: تدوير 1S الخطية. 
      الرسوم المتحركة: تدوير 1S الخطية. 
  } 
  اللا-BTN: نشطة { 
      -webkit-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px -1px 0px 8px رغبا (188، 188، 188، 0.3)، 0px 0px 0px 10px #fff؛ 
      -moz-بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنزيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px -1px 0px 8px رغبا (188، 188، 188، 0.3)، 0px 0px 0px 10px #fff؛ 
      بوكس-شادو: 0px 0px 5px 0px رغبا (246، 212، 163، 0.5) إنسيت، 0px -1px 5px 4px رغبا (170، 77، 27، 0.2) إنزيت، 0px 0px 0px 7px #fff، 0px -1px 0px 8px رغبا (188، 188، 188، 0.3)، 0px 0px 0px 10px #fff؛ 
  } 
  .a-بتن: أكتيف سبان: نث-تشيلد (2) { 
      كولور: رغبا (170، 77، 27، 0.8)؛ 
      تكست-شادو: 0px 1px 1px رغبا (255، 255، 255، 0.6)؛ 
  } 
  keyframes تدوير { 
      0٪ {ترانسفورم: سكيل (1) روتيت (0)؛} 
      50٪ {ترانسفورم: سكيل (0.5) روتيت (180deg)؛} 
      100٪ {ترانسفورم: سكيل (1) روتيت (360deg)؛} 
  } 
  @ -webkit-كيفرامس روتيت { 
      0٪ {-webkit-ترانسفورم: سكيل (1) روتيت (0)؛} 
      50٪ {-webkit-ترانسفورم: سكيل (0.5) روتيت (180deg)؛} 
      100٪ {-webkit-ترانسفورم: سكيل (1) روتيت (360deg)؛} 
  } 
  @ -moz-كيفرامس روتيت { 
      0٪ {-moz-ترانسفورم: سكيل (1) روتيت (0)؛} 
      50٪ {-moz-ترانسفورم: سكيل (0.5) روتيت (180deg)؛} 
      100٪ {-moz-ترانسفورم: سكيل (1) روتيت (360deg)؛} 
  } 

 

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

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

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

  <ديف كلاس = "بوتون-ورابر">

 <a href="#" class="a-btn"> <سبان> </ سبان>
 <سبان> الاشتراك </ سبان>
 <سبان> إنه مجاني! </ سبان> </a>

 <a href="#" class="a-btn"> <سبان> </ سبان>
 <سبان> الانضمام الآن </ سبان>  
 <سبان> إنه مجاني! </ سبان> </a>

 <a href="#" class="a-btn"> <سبان> </ سبان>
 <span> أدخل </ SPAN> 
 <سبان> إنه مجاني! </ سبان> </a>

 <a href="#" class="a-btn">
 <SPAN> </ SPAN>
 <سبان> الدخول في </ سبان>
 <سبان> إنه مجاني! </ سبان> </a>
 </ div>

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

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