Rollover buttons & icons with CSS(3)

Button icon behaviour

အခုဆက္ျပီးေတာ့ အဲဒီ button ရဲ႕ text ကုိ icon ဆုိတဲ့ class နဲ႔ တဲြျပီး ထည့္ပါမယ္။ ဒီ icon class ကုိ icon ပံုေလး ေပါင္းထည့္ဖုိ႔ရယ္ သူ႕ behavior ေတြထည့္ဖုိ႔ သံုးပါမယ္။ button background ကုိလုိက္ျပီးေတာ့ icon ရဲ႕ အေရာင္ကလည္း (၃)မ်ိဳး ေျပာင္းသြားပါမယ္။ icon ကုိ OK ရဲ႕ ဘယ္ဘက္မွာထည့္ပါမယ္။

.icon {
background-repeat: no-repeat;
padding: 0 0 5px 18px;
}

Background image ကုိေနာက္မွာ ထပ္ေၾကညာပါမယ္။ အခု no-repeat ဆုိတာေလးပဲေၾကညာထားမယ္။ padding ကုိ အေပၚနဲ႔ညာဘက္ ကုိ ‘0’ ထားပါမယ္။ ေအာက္ကုိ ‘5’ ထားပါမယ္။ ဘယ္ဘက္ကုိ ‘18’ ထားပါမယ္။ ‘18’ ကုိေတာ့ icon အတြက္ေနရာခ်န္ထားတာျဖစ္ပါတယ္။ icon က (16*84) ရွိပါတယ္။

a.button:hover .icon, a.button:active .icon {
background-position: 0 -28px;
}
a.buttonDis:link .icon, a.buttonDis:visited .icon, a.buttonDis:hover .icon, a.buttonDis:active .icon {
background-position: 0 -56px;
}

Rollover effect ဟာ same background image positioning technique ကုိ button ရဲ႕ background ေျပာင္းဖုိ႔သံုးသြားတာျဖစ္ပါတယ္.။ (icon ေလးဟာ a:hover a:active အဆင့္ေတြမွာ 28 pixel position ေျပာင္းသြားျပီး orange icon ျဖစ္သြားပါမယ္။ disabled button ရဲ႕ icon ကေတာ့ 56 pixel position မွာရွိတဲ့ background ကုိပဲ သံုးပါမယ္။
**********************************************************
An icon for each button
ျပီးခဲ့တဲ့ အဆင့္ေတြမွာ button ရဲ့ state ေတြကုိလုိက္ျပီးေတာ့ ေနရာေျပာင္းသြားတာကုိ ေၾကညာခဲ့ပါတယ္။ အခုဒီမွာေတာ့ button ေတြမွာ အသံုးျပဳမယ့္ icon file ေတြကုိ ေၾကညာပါမယ္။ သံုုးမ်ိဳးရွိပါတယ္။ OK button,Cancel button and import button အတြက္ပါ။

#buttonOK .icon {
background-image: url(ok.gif);
}
#buttonCancel .icon {
background-image: url(cancel.gif);
}
#buttonImport .icon {
background-image: url(import.gif);
}

Tutorial file ကုိ ဒီ မွာ ေဒါင္းပါ။
MORE INFO => http://sophie-g.net/jobs/css/e_buttons.htm