Rollover buttons & icons with CSS(2)

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 ထားလုိက္ပါတယ္။

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 >