مجموعة أزرار بتقنية CSS3 مع التأثير لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

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

::: طريقة التركيب :::

1- ادخل الى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم  اختر قالب ثم اضغط على تحرير قالب .

3- ابحث عن الوسم :  

4- ضع الكود التالي فوقه .

 <link rel='stylesheet' href='https://googledrive.com/host/0BxFbqjck0GDdaHAxOWdrbDVRc0U' media='all'/> 

5- احفظ القالب .

6 - طريقة استخدام الأزرار ، استخدمها في وضعية " HTML "

::: المجموعة الأولى :::

 <a rel='ضع هنا رابط التوجيه' class='button grow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button shrink'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button pulse'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button pulse-grow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button pulse-shrink'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button push'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button pop'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button rotate'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button grow-rotate'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button float'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button sink'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button hover'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button hang'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button skew'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button skew-forward'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button skew-backward'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-horizontal'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-vertical'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-to-bottom-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-to-top-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-top'>Wobble Top</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-bottom'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button wobble-skew'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button buzz'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button buzz-out'>تعديل</a>
 

- ملحوظة /  أن كلمة " تعديل " هي تسمية الزر بالأسم الذي ترغب به مثلاً : معاينة ، تحميل ..... الخ .

انقر هنا للمعاينة

::: المجموعة الثانية :::

 <a rel='ضع هنا رابط التوجيه' class='button red border-fade'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button red hollow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button red trim'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button red outline-outward'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button red outline-inward'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button red round-corners'>تعديل</a> 

انقر هنا للمعاينة

::: المجموعة الثالثة :::

 <a rel='ضع هنا رابط التوجيه' class='button turqoise glow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button turqoise box-shadow-outset'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button turqoise box-shadow-inset'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button turqoise float-shadow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button turqoise hover-shadow'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button turqoise shadow-radial'>تعديل</a> 

انقر هنا للمعاينة

::: المجموعة الرابعة :::

 <a rel='ضع هنا رابط التوجيه' class='button orange bubble-top'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-bottom'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-left'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-float-top'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-float-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-float-bottom'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button orange bubble-float-left'>تعديل</a>
 

انقر هنا للمعاينة

::: المجموعة الخامسة :::

 <a rel='ضع هنا رابط التوجيه' class='button purple curl-top-left'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button purple curl-top-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button purple curl-bottom-right'>تعديل</a>
<a rel='ضع هنا رابط التوجيه' class='button purple curl-bottom-left'>تعديل</a> 

انقر هنا للمعاينة