أزرار بسيطة | الجزء الثاني
أعود مجدداً بأزرار كالعادة البساطة تجتاحها وكذلك بنفس الوقت تأثيرها وشكلها مبهج ورائع لكافت الإستعمالات ولكل المواقع أترككم مع المعاينة ولكم حرية الإستعمال
شرح طريقة التركيب
1 . توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin>
3. ضع الكود التالي قبله [ فوقه ]
.button{background-color:#bdc3c7;font-size:13px;text-decoration:none;color:#676873;position:relative;margin-left:35px;padding:10px 20px;border-left:solid 1px #d3d8db;
border-radius: 3px;box-shadow: inset 0px 1px 0px #dcdfe1, 0px 5px 0px 0px #7f8c8d;}
.button:hover{top:7px;color:#95a5a6;background-image:linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);box-shadow:inset 0px 1px 0px #ecf0f1, 0px 1px 0px 0px #7f8c8d;text-shadow:0px 1px 1px rgba(255,255,255,0.3);}
.button-upload{color:#fff;background-color:#3498db;border-left:solid 1px #6fbaec;box-shadow:inset 0px 1px 0px #73b0d8, 0px 6px 0px #2980b9;}
.button-upload:hover{color:#2980b9;box-shadow:inset 0px 1px 0px #73b0d8, 0px 1px 0px 0px #2980b9;}
.button-view{color:#fff;background-color:#2ecc71;border-left:solid 1px #78e0a4;box-shadow:inset 0px 1px 0px #6ccc95, 0px 6px 0px #27ae60;}
.button-view:hover{color:#26a95e;box-shadow:inset 0px 1px 0px #6ccc95, 0px 1px 0px 0px #27ae60;}
.button-error{color:#fff;background-color:#e74c3c;border-left:solid 1px #ee897f;box-shadow:inset 0px 1px 0px #e98a80, 0px 5px 0px #c0392b;}
.button-error:hover{color:#cc3e2f;box-shadow:inset 0px 1px 0px #e98a80, 0px 1px 0px 0px #c0392b;}
.button-warning{color:#fff;background-color:#e67e22;border-left:solid 1px #f0ab6e;box-shadow:inset 0px 1px 0px #e3a36a, 0px 6px 0px #d35400;}
.button-warning:hover{color:#c56816;box-shadow:inset 0px 1px 0px #e3a36a, 0px 1px 0px 0px #d35400;}
.button-hm{color:#fff;background-color:#3A4247;border-left:solid 1px #2C3235;box-shadow:inset 0px 1px 0px #3A4247, 0px 6px 0px #292E32;}
.button-hm:hover{color:#23282C;box-shadow:inset 0px 1px 0px #3A4247, 0px 1px 0px 0px #292E32;}
تفعيل الكود
1. حرر الموضوع
2. إنتقل لتبويب HTML
3. ضع الزر الذي تريده
<a class="button" href="#">افتراضي</a>
<a class="button button-upload" href="#">تحميل</a>
<a class="button button-view" href="#">معاينة</a>
<a class="button button-error" href="#">خطأ</a>
<a class="button button-warning" href="#">تنبيه</a>
<a class="button button-hm" href="#">رفع الملف</a>
* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
تحويل الأكواد إغلاق التعبيرات إخفاء