السلام عليكم ورحمة الله وبركاته
في درسنا اليوم سوف نتعرف على مجموعة من الأزرار في قمة الروعة والإحترافية ، والكثير منا يرغب في تغير الأزرار التقليدية التي تستخدمها في مواضيعنا ، لذا فريق عمل المدونة يقدم لكم هذه المجموعة من الأزرار التي تضيف إلى مواضيعكم لمسة جمالية أحترافية .
::: طريقة التركيب :::
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> 
ليست هناك تعليقات:
إرسال تعليق