Thursday, January 07, 2010
min that thant
Button background behaviour & colour
အခု အဲဒီ button ကို :link , :visited , :hover , :active states of links စတဲ့ behavior တွေ ဖြည့်ပါမယ်။
a.button:link, a.button:visited {
color: #002577;
}
a.button:hover, a.button:active {
background-position: 0 -36px;
color: #FF7200;
}
:link နဲ့ :visited တို့ကို အရင် က click လုပ်ခဲ့ခဲ့၊ မလုပ်ခဲ့ခဲ့ font-color အတူတူပဲလို့ ထားလိုက်ပါမယ်။ အဲဒီမှာ button ရဲ့ background-position ကို မသတ်မှတ်ပါဘူး။ ဒီတော့ background-position အနေနဲ့ default က image ရဲ့ top-left point ကို ယူပါမယ်။ စိတ်ဝင်စားဖို့ကောင်းတာက :hover နဲ့ :active မှာပါ။ သူ့မှာ လဲ font-color ကို အတူတူပဲ orange ထားပါတယ်။ ဒါပေမယ့် background-position ကို yellow background ရောက်တဲ့အထိ point ကို ရွှေ့သွားပါတယ် ။ (x=0,y=-36)
Disabled button လုပ်ဖို့အတွက်ကတော့ button state အားလုံးကို အတူတူပဲ ထားပါမယ်။background-position ကိုတော့ (x=0,y=-72) ထားလိုက်ပါတယ်။ font-color ကို gray ထားလိုက်ပါတယ်။
Disabled button လုပ်ဖို့အတွက်ကတော့ button state အားလုံးကို အတူတူပဲ ထားပါမယ်။background-position ကိုတော့ (x=0,y=-72) ထားလိုက်ပါတယ်။ font-color ကို gray ထားလိုက်ပါတယ်။
a.buttonDis:link, a.buttonDis:visited, a.buttonDis:hover, a.buttonDis:active {
background-position: 0 -72px;
color: #5F5F5F;
cursor: default;
}
အောက်က ကုတ်ကတော့ Disabled button အတွက် ရေးထားတာပါ။ button အတွက် buttonDis class ကို သုံးပါတယ်။ icon အတွက်ကတော့ icon class ကို သုံးပါတယ်။ နောက် အပိုင်းမှာ icon class အကြောင်းကို ပြောသွားပါမယ်။
< a href="javascript:return false;" class="buttonDis" id="buttonImport" title="You can’t use this button" > < span class="icon" > Import < /span > < /a >
Posted in 
No Response to "Rollover buttons & icons with CSS(2)"
Post a Comment