آموزش تغییر button

[MohamadReza]

سلام

دیدم یه چیزی بلدم گفتم به کسایی هم که بلد نیستن یاد بدم بلکه کمکی کرده باشم

برای تغییر این دکمه ها



به گلوبال برید و کد زیر رو به آخر گلوبال اضافه کنید.

کد:

input {
    background: -moz-linear-gradient(center top , rgb(255, 255, 255) 5%, rgb(223, 223, 223) 100%) repeat scroll 0% 0% rgb(255, 255, 255);
        background-color: rgb(255, 255, 255);
        background-image: -moz-linear-gradient(center top , rgb(255, 255, 255) 5%, rgb(223, 223, 223) 100%);
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0% 0%;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
    font-weight: bold;
    border-width: 1px 1px 0px;
        border-top-width: 1px;
        border-right-width-value: 1px;
        border-bottom-width: 0px;
        border-left-width-value: 1px;
        border-left-width-ltr-source: physical;
        border-left-width-rtl-source: physical;
        border-right-width-ltr-source: physical;
        border-right-width-rtl-source: physical;
    border-style: solid solid none;
        border-top-style: solid;
        border-right-style-value: solid;
        border-bottom-style: none;
        border-left-style-value: solid;
        border-left-style-ltr-source: physical;
        border-left-style-rtl-source: physical;
        border-right-style-ltr-source: physical;
        border-right-style-rtl-source: physical;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) -moz-use-text-color;
        border-top-color: rgb(220, 220, 220);
        border-right-color-value: rgb(220, 220, 220);
        border-bottom-color: -moz-use-text-color;
        border-left-color-value: rgb(220, 220, 220);
        border-left-color-ltr-source: physical;
        border-left-color-rtl-source: physical;
        border-right-color-ltr-source: physical;
        border-right-color-rtl-source: physical;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
        border-image-source: none;
        border-image-slice: 100% 100% 100% 100%;
        border-image-width: 1 1 1 1;
        border-image-outset: 0 0 0 0;
        border-image-repeat: stretch stretch;
    font-size: 12px;
    padding: 5px;
        padding-top: 5px;
        padding-right-value: 5px;
        padding-bottom: 5px;
        padding-left-value: 5px;
        padding-left-ltr-source: physical;
        padding-left-rtl-source: physical;
        padding-right-ltr-source: physical;
        padding-right-rtl-source: physical;
    position: relative;
    top: 1px;
    border-radius: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
    box-shadow: 0px 1px 0px 0px rgb(255, 255, 255) inset;
}

این کد ماله حالتش بود که تبدیل به این میشه


خب این کد هم بعد از کد قبلی اگه اضافه کنید حالتی میشه که موس میره روش رنگ و حالتش عوض میشه

کد:

.button:hover {
    background: #999999;
    color: #ffffff;
    border: 2px solid #000000;
    -moz-border-radius: 16px 5px;
    -webkit-border-radius: 16px 5px 16px 5px;
    border-radius: 16px 5px;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    box-shadow: 0px 0px 5px #000000;
    -moz-transition: all 0.4s ease-in;
    -webkit-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
}

به این حالت تبدیل میشه


البته رنگ پس زمینه پیشفرضٍ که میتونید تغییر بدید.

[a.armaney]

ایول داداش


من دکمه رو استفاده نکردم فقط هاور رو با اندکی تغییر برای لینک هام گذاشتم طرحش جالب بود اگه کسی خواست پیام بده کدشو بهش بدم