استایل دادن به باتن ها با css

برای زیبا سازی وب سایت باید در طراحی اجزای آن دقت زیادی داشته باشیم . زیبایی ظاهر سایت تاثیر بسیاری در ماندن بیشتر بازدید کننده و مراجعه بعدی او به وب سایت خواهد داشت.

یکی از این اجزا باتن ها هستند که به صورت خودکار ظاهر چندان جالبی ندارند.

مثال:

<input  type="submit"  class="btn-save btn-hover"  value="ذخیره"  />

 

برای کلاس   btn-save از استایلهای زیر استفاده می کنیم:

.btn-save {

   /*   تصویر زمینه   */

backgound-image : url(images/bt-save.png);

/* جلوگیری از تکرار تصویر  */

background-repeat : no-repeat ;

width : 45px ;

/*  گرد کردن گوشه ها */

border-radius : 3px;

background-color : #f2f2f2 ;

/* نماایش به شکل لینک */

cursor : pointer ;

border : 1px  solid  #ccc ;

/* محل قرار گرفتن تصویر زمینه*/

background-position : top  center ;

/* محل قرار گرفتن متن */

padding : 30px  0px  0px  0px ;

font-size : 11px ;

}

 

برای اینکه اگر موس بر روی باتن hover شد رنگ آن تغییر کند از استایل زیر استفاده می کنیم :

.btn-hover : hover {
            background-color : #3cc;
        }

 

با این دستورات می توان باتن ها را به هر شکلی در آورد.


نمایش نتیجه کد
تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2020