0 أزرار CSS3 رهيبة ل بلوجر

عندما كنت تصميم أداة مدون لطيفة لبلوق الخاص بك. مثل إضافة بعض الأزرار إلى بلوق الخاص بك عن أي أمر، تحتاج إلى نمط زر لطيف للمدون الخاص بك. لأنه سوف يساعد على جذب blog.So الخاص بك، في هذا المنصب إم توفير بعض الأزرار النمط الكلاسيكي مع الرموز فإنه include9 أزرار. في وقت سابق آخر عن أزرار حتى تتمكن من إضافة الأزرار اتبع هذه الخطوات
لإضافته إلى مدونتك.

DEMO

1. قم بتسجيل الدخول إلى بلوجر ديسين> بادج إليمنت.

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

3. قم بلصق الرمز أدناه قبل ]]> </ b: سكين> بطاقة

  .زر
 {ديسبلاي: إنلين-بلوك؛
  وايت-سباس: نوراب؛
  باكغروند-كولور: #ccc؛
  باكغروند-إيماج: -webkit-غرادينت (لينير، ليفت توب، ليفت بوتوم، فروم (#eee)، تو (#ccc))؛
  باكغروند-إيماج: -webkit-لينير-غرادينت (توب، #eee، #ccc)؛
  باكغروند-إيماج: -moz-لينير-غرادينت (توب، #eee، #ccc)؛
  باكغروند-إيماج: -ms-لينير-غرادينت (توب، #eee، #ccc)؛
  باكغروند-إيماج: -o-لينير-غرادينت (توب، #eee، #ccc)؛
  باكغروند-إيماج: لينير-غرادينت (توب، #eee، #ccc)؛
  فيلتر: بروجيد: DXImageTransform.Microsoft.gradient (ستارتكولورستر = '# إيييي'، إندكولورستر = '# كك')؛
  بوردر: 1px سوليد # 777؛
  بادينغ: 0 1.5em؛
  مارجين: 0.5em؛
  فونت: بولد 1em / 2em أريال، هلفيتيكا؛
  تكست-ديكوراتيون: نون؛
  كولور: # 333؛
  تكست-شادو: 0 1px 0 رغبا (255،255،255، .8)؛
  -moz-بوردر-راديوس: .2em؛
  -webkit-بوردر-راديوس: .2em؛
  بوردر-راديوس: .2em؛
  -moz-بوكس-شادو: 0 0 1px 1px رغبا (255،255،255، .8) إنزيت، 0 1px 0 رغبا (0،0،0، .3)؛
  -webkit-بوكس-شادو: 0 0 1px 1px رغبا (255،255،255، .8) إنزيت، 0 1px 0 رغبا (0،0،0، .3)؛
  بوكس-شادو: 0 0 1px 1px رغبا (255،255،255، .8) إنزيت، 0 1px 0 رغبا (0،0،0، .3)؛
 }
 .button: تحوم
 {
  باكغروند-كولور: #ddd؛        
  باكغروند-إيماج: -webkit-غرادينت (لينير، ليفت توب، ليفت بوتوم، فروم (#fafafa)، تو (#ddd))؛
  باكغروند-إيماج: -webkit-لينير-غرادينت (توب، #fafafa، #ddd)؛
  باكغروند-إيماج: -moz-لينير-غرادينت (توب، #fafafa، #ddd)؛
  باكغروند-إيماج: -ms-لينير-غرادينت (توب، #fafafa، #ddd)؛
  باكغروند-إيماج: -o-لينير-غرادينت (توب، #fafafa، #ddd)؛
  باكغروند-إيماج: لينير-غرادينت (توب، #fafafa، #ddd)؛
  فيلتر: بروجيد: DXImageTransform.Microsoft.gradient (ستارتكولورستر = '# ففافا'، إندكولورستر = '# دد')؛        
 }
 .button: نشطة
 {-moz-بوكس-شادو: 0 0 4px 2px رغبا (0،0،0، .3) إنسيت؛
  -webkit-بوكس-شادو: 0 0 4px 2px رغبا (0،0،0، .3) إنسيت؛
  بوكس-شادو: 0 0 4px 2px رغبا (0،0،0، .3) إنسيت؛
  بوسيتيون: ريلاتيف؛
  توب: 1px؛
 }
 .button: التركيز
 {
  أوتلين: 0؛
  الخلفية: #fafafa؛
 }    
 .button: قبل
 {
  باكغروند: #ccc؛
  باكغروند: رغبا (0،0،0، .1)؛
  تعويم: اليسار؛        
  ويدث: 1em؛
  تكست-ألين: سينتر؛
  فونت-سيز: 1.5em؛
  مارجين: 0 1em 0 -1em؛
  بادينغ: 0 .2em؛
  -moz-بوكس-شادو: 1px 0 0 رغبا (0،0،0، .5)، 2px 0 0 رغبا (255،255،255، .5)؛
  -webkit-بوكس-شادو: 1px 0 0 رغبا (0،0،0، .5)، 2px 0 0 رغبا (255،255،255، .5)؛
  بوكس-شادو: 1px 0 0 رغبا (0،0،0، .5)، 2px 0 0 رغبا (255،255،255، .5)؛
  -moz-بوردر-راديوس: .15em 0 0 .15em؛
  -webkit-بوردر-راديوس: .15em 0 0 .15em؛
  بوردر-راديوس: .15em 0 0 .15em؛
         بوينتر-إيفنتس: نون؛        
 }

 / * الكيانات الست عشرية للرموز * /

 .إضافة قبل
 {كونتنت: "\ 271A"؛
 }
 .edit: قبل
 {كونتنت: "\ 270E"؛        
 }
 .delete: قبل
 {كونتنت: "\ 2718"؛        
 }
 . حفظ: قبل
 {كونتنت: "\ 2714"؛        
 }
 .email: قبل
 {كونتنت: "\ 2709"؛        
 }
 .مثل السابق
 {كونتنت: "\ 2764"؛        
 }
 .next: قبل
 {كونتنت: "\ 279C"؛
 }
 .star: قبل
 {كونتنت: "\ 2605"؛
 }
 .spark: قبل
 {كونتنت: "\ 2737"؛
 }
 .play: قبل
 {كونتنت: "\ 25B6"؛
 } 

4. الآن رمز هتمل هنا

إذا كنت تريد إضافة زر واحد، فأضف رابطا واحدا فقط لمدونتك.

  <a class="button add" href="#"> إضافة </a>
 <a class="button delete"href="#"> حذف </a>
 <a class="button edit" href="#"> تعديل </a>
 <a class="button save" href="#"> حفظ </a>
 <a class="button email" href="#"> البريد الإلكتروني </a>
 <a class="button like" href="#"> مثل </a>
 <a class="button next" href="#"> التالي </a>
 <a class="button spark" href="#"> سبارك </a>
 <a class="button play" href="#"> تشغيل </a>

استبدل # بالرابط والأسماء.

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

انتهيت...