0 إضافة جذابة أزرار كس المتحركة لبلوغر

اليوم أنا ستعمل شرح كيفية إضافة css3 أزرار متحركة أنيقة للمدون الخاص بك. تستطيع   استعمال
هذه الأزرار كما أزرار التحميل، وأزرار التجريبي، إعادة توجيه إلى صفحة أخرى و etc.Im باستخدام كس و 
H تمل لهذا الغرض. يمكنك استخدام رمز هذا الزر في وظيفة المدون الخاص بك أيضا. تحقق من مشاركتي السابقة حول 
رموز الأزرار هنا .

عرض

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

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

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

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

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

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

  .زر{
 الخط: 15px كالبري، أريال، سانس-شريف؛
 تكست-شادو: 1px 1px 0 رغبا (255،255،255،0.4)؛
 تكست-ديكوراتيون: نون! إمبورتانت؛
 أبيض الفضاء: بلا التفاف.
 عرض: مضمنة كتلة.
 محاذاة رأسية: خط الأساس.
 الموقف: النسبية.
 المؤشر: المؤشر.
 بادينغ: 10px 20px؛
 الخلفية تكرار: لا توجد تكرار.
 باكغروند-بوسيتيون: بوتوم ليفت؛
 خلفية الصورة: رابط ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')؛
 باكغروند-بوسيتيون: بوتوم ليفت، توب رايت، 0 0، 0 0؛
 خلفية كليب: مربع الحدود؛
 -moz الحدود نصف قطرها: 8px؛
 -webkit الحدود نصف قطرها: 8px؛
 الحدود بين دائرة نصف قطرها: 8px؛
 -moz-بوكس-شادو: 0 0 1px #fff إنسيت؛
 -webkit-بوكس-شادو: 0 0 1px #fff إنسيت؛
 بوكس-شادو: 0 0 1px #fff إنسيت؛
 -webkit-ترانزيتيون: باكغروند-بوسيتيون 1s؛
 -moz-ترانزيتيون: باكغروند-بوسيتيون 1s؛
 ترانزيتيون: باكغروند-بوسيتيون 1s؛
 }
 .button: تحوم {
 باكغروند-بوسيتيون: أعلى اليسار؛
 باكغروند-بوسيتيون: توب ليفت، بوتوم رايت، 0 0، 0 0؛
 }
 .button: نشطة {
 أسفل: -1px.
 }
 / * أزرار الأزرار الثلاثة * /
 .button.big {فونت-سيز: 30px؛}
 .button.medium {فونت-سيز: 18px؛}
 .button.small {فونت-سيز: 13px؛}
 / * بليبوتون * /
 .blue.button {
 كولور: # 0f4b6d! إمبورتانت؛
 بوردر: 1px سوليد # 84acc3! إمبورتانت؛
 باكغروند-كولور: # 48b5f2؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / AAAAAAAABhE / qNaNueMVpCU / s144 / button_bg.png ')،
 -moz-راديال-غرادينت (مركز القاع، دائرة،
 (89،208،244،1) 0، رغبا (89،208،244،0) 100px)،
 -moz-لينير-غرادينت (# 4fbbf7، # 3faeeb)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / AAAAAAAABhE / qNaNueMVpCU / s144 / button_bg.png ')،
 -webkit التدرج (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100،
 من) رغبا (89،208،244،1)) إلى (رغبا (89،208،244،0)))،
 -webkit-غرادينت (لينير، 0٪ 0٪، 0٪ 100٪، فروم (# 4fbbf7)، تو (# 3faeeb))؛
 }
 .blue.button: تحوم {
 لون الخلفية: # 63c7fe.
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / AAAAAAAABhE / qNaNueMVpCU / s144 / button_bg.png ')،
 -moz-راديال-غرادينت (مركز القاع، دائرة،
 (109،217،250،1) 0، رغبا (109،217،250،0) 100px)،
 -moz-لينير-غرادينت (# 63c7fe، # 58bef7)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / AAAAAAAABhE / qNaNueMVpCU / s144 / button_bg.png ')،
 -webkit التدرج (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100،
 من (رغبا) 109،217،250،1 ((إلى) رغبا) 109،217،250،0 (((،
 -webkit-غرادينت (لينير، 0٪ 0٪، 0٪ 100٪، فروم (# 63c7fe)، تو (# 58bef7))؛
 }
 / * زر أخضر * /
 .green.button {
 كولور: # 345903! إمبورتانت؛
 بوردر: 1px سوليد # 96a37b!
 باكغروند-كولور: # 79be1e؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (وسط القاع، دائرة، رغبا (162،211،30،1) 0، رغبا (162،211،30،0) 100px) ، -moz-لينير-غرادينت (# 82cc27، # 74b317)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- -cqnmlF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -webkit-غرادينت (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، فروم (رغبا (162،211،30،1) ، إلى (رغبا (162،211،30،0)))، - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# 82cc27) إلى (# 74b317))؛
 }
 .green.button: تحوم {
 لون الخلفية: # 89d228.
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (وسط القاع، دائرة، رغبا (183،229،45،1) 0، رغبا (183،229،45،0) 100px) ، -moz-لينير-غرادينت (# 90de31، # 7fc01e)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- ، 4 -WWll-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -webkit-غرادينت (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، فروم (رغبا (183،229،45،1) ، إلى (رغبا (183،229،45،0)))، - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# 90de31)، إلى (# 7fc01e))؛
 }
 / * زر البرتقال * /
 .orange.button {
 كولور: # 693e0a! إمبورتانت؛
 بوردر: 1px سوليد # bea280! إمبورتانت؛
 باكغروند-كولور: # e38d27؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / أاعابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (وسط القاع، دائرة، رغبا (232،189،45،1) 0، رغبا (232،189،45،0) 100px) ، -moz-لينير-غرادينت (# f1982f، # d4821f)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- -cqmmF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -webkit-غرادينت (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، فروم (رغبا (232،189،45،1) ، إلى (رغبا (232،189،45،0)))، - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# f1982f) إلى (# d4821f))؛
 }
 .orange.button: تحوم {
 لون الخلفية: # ec9732.
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ("https://lh6.googleusercontent.com/- 4cWMlF-uqh4 / TltCfL8C4DI / أاعابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (وسط القاع، دائرة، رغبا (241،192،52،1) 0، رغبا (241،192،52،0) 100px) ، -moz-لينير-غرادينت (# f9a746، # e18f2b)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- ، 4 -WWhlF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -webkit-غرادينت (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، فروم (رغبا (241،192،52،1) ، إلى (رغبا (241،192،52،0)))، - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# f9a746) إلى (# e18f2b))؛
 }
 / * زر البرتقال * /
 .gray.button {
 كولور: # 525252! إمبورتانت؛
 بوردر: 1px سوليد # a5a5a5!
 باكغروند-كولور: # a9adb1؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4 -Wqh4 / TltCfL8C4DI / أاعابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (أسفل الوسط، دائرة، رغبا (197،199،202،1) 0، رغبا (197،199،202،0) 100px)، - moz- لينير-غرادينت (# c5c7ca، # 92989c)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- -cqmlF-uqh4 / TltCfL8C4DI / أاعابه / كنانيمفكو / s144 / button_bg.png ')، -debkit التدرج (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، من (رغبا (197،199،202،1) (رغبا (197،199،202،0))) - - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# c5c7ca) إلى (# 92989c))؛
 }
 .gray.button: تحوم {
 لون الخلفية: # b6bbc0.
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- 4 -Wqh4 / TltCfL8C4DI / أاعابه / كنانيمفكو / s144 / button_bg.png ')، -moz-راديال-غرادينت (أسفل الوسط، الدائرة، رغبا (202،205،208،1) 0، رغبا (202،205،208،0) 100px)، - moz- لينير-غرادينت (# d1d3d6، # 9fa5a9)؛
 باكغروند-إيماج: ورل ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCT6pxvhIiZKhvC0AM7Y0iLE94fExNFsZzGlQNuFzv7jZPdEJcjxGT1MNtRbfyU3KnikIn0VpSnd7FcIDfhSWCfU5RIZa8tcUX0aPFi0uf4cvIbbM6oLCVGNbffm3yMYAkjSytv0WADuQ/s144/button_bg.png')، ورل ('https://lh6.googleusercontent.com/- -cqmLF-uqh4 / TltCfL8C4DI / أعاابه / كنانيمفكو / s144 / button_bg.png ')، -webkit التدرج (شعاعي، 50٪ 100٪، 0، 50٪ 100٪، 100، من (رغبا (202،205،208،1) (رغبا (202،205،208،0))) - - التدرج على الويب (الخطية، 0٪ 0٪، 0٪ 100٪، من (# d1d3d6)، إلى (# 9fa5a9))؛
 } 

7. انتقل إلى المدون وانقر فوق تخطيط

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

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

(يمكنك استخدام هذه الشفرة في أي مكان في مشاركتك.)

  <a class="button بيج بلو "href="Your Link" target="_blank"> عرض تجريبي مباشر </a>

 <a class="button بيج أورانج "href="Your Link" target="_blank"> عرض تجريبي مباشر </a>

 <a class="button بيج غرين "href="Your Link" target="_blank"> عرض تجريبي مباشر </a>

 <a class="button بيج غرا y "href="Your Link" target="_blank"> عرض تجريبي مباشر </a> 

استبدل الروابط.

10. الآن حفظ هتمل / جافا سكريبت الخاص بك . 

انتهيت...