0 أزرار مدون Css3 المتحركة مع تأثير الصورة لطيفة

في هذا البرنامج التعليمي إم ستعمل شرح كيفية أدنيس أزرار Css3 مع تأثير الصورة تحوم. يمكنك استخدامه لأي أزرار. خصيصا للبيع البنود. يمكنك تغيير الصورة كما تريد. إم باستخدام Css3 و هتمل لهذه الأزرار. البرنامج التعليمي يمكنك التحقق من الأزرار السابقة 
مقالات هنا 

DEMO 

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

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

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

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

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

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

  اللا-BTN { 
      خلفية: # a9db80. 
      باكغروند: -webkit-غرادينت (لينير، ليفت توب، ليفت بوتوم، كولور-ستوب (# a9db80،0)، كولور-ستوب (# 96c56f، 1))؛ 
      باكغروند: -webkit-لينير-غرادينت (توب، # a9db80 0٪، # 96c56f 100٪)؛ 
      باكغروند: -moz-لينير-غرادينت (توب، # a9db80 0٪، # 96c56f 100٪)؛ 
      باكغروند: -o-لينير-غرادينت (توب، # a9db80 0٪، # 96c56f 100٪)؛ 
      باكغروند: لينير-غرادينت (توب، # a9db80 0٪، # 96c56f 100٪)؛ 
      فيلتر: بروجيد: DXImageTransform.Microsoft.gradient (ستارتكولورستر = '# a9db80'، إندكولورستر = '# 96c56f'، غرادينتيب = 0)؛ 
      الحشو اليسرى: 90px؛ 
      الحشو اليمين: 105px؛ 
      الطول: 65px؛ 
      عرض: مضمنة كتلة. 
      الموقف: النسبية. 
      بوردر: 1px سوليد # 80ab5d؛ 
      -webkit-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 3px رغبا (0،0،0،0.2)؛ 
      -moz-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 3px رغبا (0،0،0،0.2)؛ 
      بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 3px رغبا (0،0،0،0.2)؛ 
      -webkit الحدود نصف قطرها: 4PX. 
      -moz الحدود نصف قطرها: 4PX. 
      الحدود بين دائرة نصف قطرها: 4PX. 
      تعويم: اليسار؛ 
      واضحة على حد سواء؛ 
      مارجين: 10px 0px؛ 
      إخفاء الفائض؛ 
      -webkit-ترانزيتيون: مربع الظل 0.3s سهولة في الخروج. 
      -moz-ترانزيتيون: مربع الظل 0.3s سهولة في المغادرة. 
      -o-ترانسبورتاتيون: مربع الظل 0.3s سهولة في الخروج؛ 
      الانتقال: مربع الظل 0.3s سهولة في الخروج. 
  } 
  .a-بتن إمغ { 
      الموقف: مطلقة؛ 
      اليسار: 15px؛ 
      قمة: 13px؛ 
      الحدود: لا شيء؛ 
      -webkit-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -moz-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -o-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      الانتقال: جميع 0.3s سهولة في الخروج؛ 
  } 
  .a-بتن .a-بتن-سليد-تكست { 
      الموقف: مطلقة؛ 
      FONT-SIZE: 36px؛ 
      قمة: 18px؛ 
      اليسار: 18px؛ 
      اللون: # 6d954e. 
      التعتيم: 0؛ 
      تكست-شادو: 0px 1px 1px رغبا (255،255،255،0.4)؛ 
      -webkit-ترانزيتيون: التعتيم 0.2s سهولة في الخروج. 
      -moz-ترانزيتيون: التعتيم 0.2s سهولة في الخروج. 
      -o-ترانزيتيون: التعتيم 0.2s سهولة في الخروج. 
      الانتقال: التعتيم 0.2s سهولة في الخروج؛ 
  } 
  اللا-BTN النص { 
      الحشو أعلى: 5px؛ 
      العرض محجوب؛ 
      FONT-SIZE: 30px؛ 
      تكست-شادو: 0px -1px 1px # 80ab5d؛ 
  } 
  .a-بتن-تكست سمال { 
      العرض محجوب؛ 
      FONT-SIZE: 11px؛ 
      الرسالة تباعد: 1PX. 
  } 
  اللا-BTN-رمز-الحق { 
      الموقف: مطلقة؛ 
      اليمين: 0px؛ 
      قمة: 0px؛ 
      الطول: 100٪؛ 
      العرض: 80px؛ 
      بوردر-ليفت: 1px سوليد # 80ab5d؛ 
      -webkit-بوكس-شادو: 1px 0px 1px رغبا (255،255،255،0.4) إنسيت؛ 
      -moz-بوكس-شادو: 1px 0px 1px رغبا (255،255،255،0.4) إنسيت؛ 
      بوكس-شادو: 1px 0px 1px رغبا (255،255،255،0.4) إنسيت؛ 
  } 
  .a-بتن-إيكون-رايت سبان { 
      العرض: 38px؛ 
      الطول: 38px؛ 
      التعتيم: 0.7. 
      -webkit الحدود نصف قطرها: 20px؛ 
      -moz الحدود نصف قطرها: 20px؛ 
      الحدود بين دائرة نصف قطرها: 20px؛ 
      الموقف: مطلقة؛ 
      اليسار: 50٪؛ 
      أعلى: 50٪؛ 
      مارجين: -20px 0px 0px -20px؛ 
      بوردر: 1px سوليد رغبا (0،0،0،0.5)؛ 
      باكغروند: # 4e5c50 ورل (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHdjqOD5DLiDIi47-ydAEWza7Li_DkEQJPP6n1EGp1I_6z5O4PSYRM-tOVpAkSM6hBQkrw50-SPcQ7qoCDxbfiqvh79OHBEj6qpcIvkbbFPFwtsq4DF3sMyglsNxasdgeI9kzaZhLvujy/s1600/arrow_down_black.png) نو-ريبيت سينتر سينتر؛ 
      -webkit-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.3) إنسيت، 0px 1px 2px رغبا (255،255،255،0.5)؛ 
      -moz-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.3) إنسيت، 0px 1px 2px رغبا (255،255،255،0.5)؛ 
      بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.3) إنسيت، 0px 1px 2px رغبا (255،255،255،0.5)؛ 
      -webkit-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -moz-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      -o-ترانزيتيون: جميع 0.3s سهولة في الخروج. 
      الانتقال: جميع 0.3s سهولة في الخروج؛ 
  } 
  اللا-BTN: تحوم { 
      -webkit-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 5px رغبا (0،0،0،0.4)؛ 
      -moz-بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 5px رغبا (0،0،0،0.4)؛ 
      بوكس-شادو: 0px 1px 1px رغبا (255،255،255،0.8) إنسيت، 1px 1px 5px رغبا (0،0،0،0.4)؛ 
  } 

  .a-بتن إمغ {مارجين-توب: -15px؛} 

  .a-بتن: هوفر إمغ { 
      -webkit-تحويل: المقياس (10)؛ 
      -moz-تحويل: المقياس (10)؛ 
      -ms-تحويل: المقياس (10)؛ 
      -o-تحويل: المقياس (10)؛ 
      تحويل: المقياس (10)؛ 
      التعتيم: 0؛ 
  } 
  .a-بتن: هوفر .a-بتن-سليد-تكست، 
  .a-بتن: هوفر .a-بتن-إيكون-رايت سبان { 
      التعتيم: 1؛ 
  } 
  اللا-BTN: نشطة { 
      الموقف: النسبية. 
      أعلى: 1PX. 
      خلفية: # 80ab5d. 
      -webkit-بوكس-شادو: 1px 1px 2px رغبا (0،0،0،0.4) إنسيت؛ 
      -moz-بوكس-شادو: 1px 1px 2px رغبا (0،0،0،0.4) إنسيت؛ 
      بوكس-شادو: 1px 1px 2px رغبا (0،0،0،0.4) إنسيت؛ 
      الحدود بين اللون: # a9db80. 
  } 
  .a-بتن: أكتيف .a-بتن-إيكون-رايت سبان { 
      -webkit-تحويل: نطاق (1.4)؛ 
      -moz-تحويل: نطاق (1.4)؛ 
      -ms-تحويل: نطاق (1.4)؛ 
      -o-تحويل: نطاق (1.4)؛ 
      تحويل: نطاق (1.4)؛ 
  } 
 

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

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

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

 
  < ديف كلاس = "كونتنت" > 
                  < ديف كلاس = "بوتون-ورابر" > 
                      <a هريف = "#" كلاس = "a-بتن"> 
                          < سبان كلاس = "a-بتن-سليد-تكست" > 9 دولارات </ سبان > 
                          < إمغ سرك = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sTsnKNw56pnJ-HpPj3XEPcv4VJbPJUiP9MC3OrvhrBDfhSzLb5yV6x8EiQBQ5Aaswf63r9yp2HA_ywitQGGcrVdE6qrLDxDuoGuhp89zzSAK2rAXvZaeyhHzBWZrpGUriz1qWZbXxWDd/s1600/1.png" ألت = "صور" /> 
                          < سبان كلاس = " a-بتن-تكست " > < سمال > متوفر على أبل </ سمال > أب ستور </ سبان > 
                          < سبان كلاس = "a-بتن-إيكون-رايت" > < سبان > </ سبان > </ سبان > 
                      </ a > 
                      <a هريف = "#" كلاس = "a-بتن"> 
                          < سبان كلاس = "a-بتن-سليد-تكست" > 75 دولارا </ سبان > 
                          < إمغ سرك = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWaMYJ21pA-6TMmfVaxbbdmZJ79t3iAHKFSsXTwJgrOrTmBroOz6kqpP8fnQiLqvhLLMUNyLOj2KPbdJZIL1Ohj4qwZq-jdXxnU0rKaPVVqjggiYLGz8QQSSb1EURUSscaD9YKEfGcQpM/s1600/2.png" ألت = "الخرائط" /> 
                          < سبان كلاس = " a-بتن-تكست " > < سمال > متوفر على أبل </ سمال > أب ستور </ سبان > 
                          < سبان كلاس = "a-بتن-إيكون-رايت" > < سبان > </ سبان > </ سبان > 
                      </ a > 
                      <a هريف = "#" كلاس = "a-بتن"> 
                          < سبان كلاس = "a-بتن-سليد-تكست" > 25 دولارا </ سبان > 
                          < إمغ سرك = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gJz6OoZikNgxf-8NT6g8aQz-qPviEfDxXy6gx_jIJX8bk9vnvZafEWOnm3b-t26fgQqMZv7XapNVlp8RA7GZt23tMKm7i_h_6hO1wmgIP6BV3fMWaCQ0eDWfqPS3OxBe805l1yZT8s56/s1600/3.png" ألت = "إعدادات" /> 
                          < سبان كلاس = " a-بتن-تكست " > < سمال > متوفر على أبل </ سمال > أب ستور </ سبان > 
                          < سبان كلاس = "a-بتن-إيكون-رايت" > < سبان > </ سبان > </ سبان > 
                      </ a > 
                      <a هريف = "#" كلاس = "a-بتن"> 
                          < سبان كلاس = "a-بتن-سليد-تكست" > 100 دولار </ سبان > 
                          < إمغ سرك = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEqfuqQvLF8q-TCMie2LfrRTAmIVX9l0DPx9A3DbCP4vktxkdNzx8PjYcekP19eT0yxmiNTKhKCPzq2p_K5A5vaZKf4fz20oo38yAtPWoZdN_MIkK_miFRke2ZLD0GBLrfJizp3J8PM7r-/s1600/4.png" ألت = "لاسلكي" /> 
                          < سبان كلاس = " a-بتن-تكست " > < سمال > متوفر على أبل </ سمال > تنزيل </ سبان > 
                          < سبان كلاس = "a-بتن-إيكون-رايت" > < سبان > </ سبان > </ سبان > 
                      </ a > 
                  </ ديف > 
              </ ديف > 
 

* استبدال # مع زر زر ورل 

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