Rollover buttons & icons with CSS(1)

ဒီ tutorial ကေတာ့ CSS နဲ႔ Button ေလးတစ္ခုကုိလုပ္တာပါပဲ။ button မွာ background image, icon and label ဆုိျပီးပါပါမယ္။ ေနာက္ျပီး သူ႔ရဲ႕ flexibility နဲ႔ save bandwidth အတြက္ button အတြက္ background-image ကုိတစ္ခုပဲသံုးပါမယ္။ icon အတြက္လည္း background-image တစ္ခုပဲသံုးပါမယ္။ အရင္က ပုိ႔စ္ ရဲ့ ေနာက္ဆက္တဲြေပါ့။
mouse မတင္မီ
mouse တင္လုိက္ေသာအခါ
http://sophie-g.net/jobs/css/buttonsTest.htmမွာ ရွင္းရွင္းလင္းလင္း ၾကည့္ႏုိင္ပါတယ္။


Button shape

---

button တစ္ခုကုိ ဖန္တီးဖုိ႔အတြက္ < a href > html tag ကုိအသံုးျပဳပါမယ္။

< a href="javascript:return false;" class="button" id="buttonOK" > < span class="icon"> Ok < /span > < /a >

ဒီမွာ javascript:return false; ေနရာမွာ link ဒါမွမဟုတ္ javascript function တစ္ခုခုကုိ ထည့္သြင္းႏုိင္ ပါတယ္။ button ရဲ႕ ID ကုိေတာ့ buttonOK လုိ႔ေပးထားပါတယ္။ < span > ကုိေတာ့ အမွန္ျခစ္ icon ေလးထည့္ဖုိ႔ အသံုးျပဳပါမယ္။ ဒီကုတ္ေတြအားလံုးကုိ html ရဲဲ႕ CSS file နဲ႔ သာအလုပ္လုပ္သြားမွာ ျဖစ္ပါတယ္။ ဘာ flash button မွ မသံုးပါဘူး။

a.button, a.buttonDis {
display: block;
background-color: transparent;
background-image: url(buttonBackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Helvetica, Calibri, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

အဲဒီမွာ ေဖာ္ျပထားတဲ့ link ကေတာ့ background image (132*28 pixels) ရွိတဲ့ ေဘးနားက ပံုေလးကုိ ညႊန္းတာပါ။ ဒီ image ေလးမွာ အသင့္ျပဳလုပ္ထားတဲ့ button ပံုစံေလး ၃ ခုပါ ပါတယ္။ for button states: normal, hover, disabled တုိ႔ျဖစ္ပါတယ္။ ဒီမွာ margin setting က button ေလးရဲ႕ ပတ္လည္ space ကုိေျပာပါတယ္။ padding ကေတာ့ button အတြင္းက icon နဲ႔ OK စာသားကုိ ခ်ိန္ေပးပါတယ္။