آموزش اضافه کردن دکمه های هایلایت مای بی بی

[☻امیرحسین☻]

درود


دوستا امروز میخوام یه آموزش بزارم !

چیزه خاصی نیست

عملکرد : اضافه کردن دکمه ای که با رفتن موس روی اون رنگش تغییر میکنه و با کلیک یک رنگ دیگه میگیره !


طریقه ایجاد :

این کد ها رو در گلوبال . سی اس اس پوستتون وارد کنید :


کد:

کد:

.button  {
     display:  inline-block;
     outline:  none;
     cursor:  pointer;
     text-align:  center;
     text-decoration:  none;
     font:  14px/100%  Arial,  Helvetica,  sans-serif;
     padding:  .2em  2em  .22em;
     text-shadow:  0  1px  1px  rgba(0,0,0,.3);
     -webkit-border-radius:  .5em;  
     -moz-border-radius:  .5em;
     border-radius:  .5em;
     -webkit-box-shadow:  0  1px  2px  rgba(0,0,0,.2);
     -moz-box-shadow:  0  1px  2px  rgba(0,0,0,.2);
     box-shadow:  0  1px  2px  rgba(0,0,0,.2);
}


.button:hover  {
     text-decoration:  none;
}
.button:active  {
     position:  relative;
     top:  1px;
}




.orange  {
     color:  #fef4e9;
     border:  solid  1px  #da7c0c;
     background:  #f78d1d;
     background:  -webkit-gradient(linear,  left  top,  left  bottom,  from(#faa51a),  to(#f47a20));
     background:  -moz-linear-gradient(top,   #faa51a,   #f47a20);
     filter:   progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',  endColorstr='#f47a20');
}
.orange:hover  {
     background:  #f47c20;
     background:  -webkit-gradient(linear,  left  top,  left  bottom,  from(#f88e11),  to(#f06015));
     background:  -moz-linear-gradient(top,   #f88e11,   #f06015);
     filter:   progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',  endColorstr='#f06015');
}
.orange:active  {
     color:  #fcd3a5;
     background:  -webkit-gradient(linear,  left  top,  left  bottom,  from(#f47a20),  to(#faa51a));
     background:  -moz-linear-gradient(top,   #f47a20,   #faa51a);
     filter:   progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',  endColorstr='#faa51a');
}

بعد به قسمت ی که میخواهید دکمه نمایش داده بشه برید مثلا header

و این کد رو وارد کنید :

<a href="#" class="button orange">Button</a>

ذخیره کنید و تمام

موفق باشید

نکته : تغییرات در کد های سی اس اس لازمه ی اطلاع شما از کد ها هستش و میتونید به رنگ ها وسایز های مختلف درش بیارید !

موفق باشید