[فيديو1] إضافة ازرار جميلة الى مدونتك

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

في هذا الشرح سوف اقوم بطرح اول فيديو للمدونة سأشرح فيه كيفية عمل ازرار في مدونتك .

مثال عن الزر : test 4we-eb 

فإذا قربنا الماوس على الزر نلاحظ انه يعمل حركة جميلة ومميزة
وكذلك يمكنك عمل رابط في الزر اي انم بمجرد الضغط عليه تفتح لك الصفحة المرادة .



 الأكواد المستعملة في الفيديو :

1-

  ]]></b:skin>

2- 

a.expand-button:link { color: #6E6E6E; font: bold 12px Helvetica, Arial, sans-serif; text-decoration: none; padding: 7px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 white; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #F3F3F3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); : -moz-linear-gradient(linear,0% 40%,0% 70%, from(whiteSmoke),to(#F1F1F1)); border: solid 1px gainsboro; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; text-align: center; width: 70px; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } a.expand-button:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 160px; 

3- 

 <a class="expand-button" href=" # "> test 4we-eb </a> 

ملاحظة : لا تنس تغيير : tst 4we-eb بمايناسبك . وغيير # بالرابط المناسب لك .

قالب بلوجر