باقة من الازرار لمدونتك ب css

بسم الله الرحمان الرحيم

لطالما تريد بعض الازرار لمدونتك لتضفي عليها مزيدا من الجمال والابداع

في هذا الدرس اعطيك حزمة من الازرار سهلة التركيب

معاينة
تركيب الكود
توجه الى القالب --> تحرير HTML

ثم ابحث عن الوسم التالي

]]></b:skin>

اضف الكود التالي فوقه مباشرة

a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } a.standard:hover { color: #fff; opacity: .5 }

تحديد الكل

واضف تحته كود الزر الذي اعجبك فقط وليس كلها

لاتنسى وضع هذاه الاكواد بين الوسم
<style>هنا ضع الكود الخاص بالزر</style>

زر احمر

.standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
تحديد الكل

زر ازرق

.standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
تحديد الكل

زر رمادي

.standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
تحديد الكل

زر اخضر

.standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
تحديد الكل

زر اسود غامق

.standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }
تحديد الكل

زر برتقالي

.standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
تحديد الكل

طريقة اضافة الزر

ضع الكود التالي في مكان وضعك للزر

زر احمر

<a class="standard red" href="#">زر احمر</a>

زر برتقالي

<a class="standard orange" href="#">زر برتقالي</a>

زر اخضر

<a class="standard green" href="#">زر اخضر</a>

زر ازرق

<a class="standard blue" href="#">زر اورق</a>

زر رمادي

<a class="standard gray" href="#">زر رمادي</a>