[ilyass kéng]

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


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

مثال عن الزر : ادخل لملاحظة الزر

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

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

 ]]></b:skin>

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;

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

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

لا تنس الاشتراك في صفحة المدونة على الفيسبوك