လင့္ေတြကို Rollover Button ေလးနဲ႕သုံးျခင္ရင္

သည္နည္းေလးေကတာ့ မိမိတို႕ဘေလာ့လင့္ေတြကို  ပုံစံဒီဇိုင္းေလးတစ္မ်ိဳးနဲ႕ ေရးနည္းပါ...
ဒါေလးကေတာ့ ပို႕စ္စာမ်က္ႏွာမွာ  ေရးနိဳင္သလို  ဆိုဒ္ဘား Java/Script မွာလဲ အသုံးျပဳနိဳင္ပါတယ္.. အဆင္ေျပတဲ့နည္းလမ္းေလးတစ္ခုပါ..ပုံမွာ ျပထားသလို ကြ်န္ေတာ့ဆိုဒ္မွာ ေရးထားတာေလးေတြပါ... Layout ကေန  Html/Javascript ကိုထည့္ထားတဲ့ အေပၚပုံပါ.. ဘယ္ကိုဘဲ လင့္ညႊန္ပါေစ သူ႕ဇယားေလးနဲ႕သူ လွလွပပ ေသသပ္ေနတာ ၾကည့္ေကာင္းတာေပါ့...

အသုံးျပဳရမဲ့ ကုဒ္ေလးေကတာ့ နဲနဲေလးနဲ႕ ရွင္းပါတယ္.. ထည့္တာကေတာ့ မိမိတို႕ ပို႕စ္မွာထည့္မယ္ဆိုလဲ ပို႕စ္စာမ်က္ႏွာမွာ html နဲ႕ကလစ္ျပီး ေအာက္ကကုဒ္ေလးကို ထည့္ေပးလိုက္ပါ။
ဆိုဒ္ဘားမွာ အသုံးျပဳမယ္ဆိုရင္ေတာ့..
   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

အသုံးျပဳရန္ကုဒ္.....
<form action="http://www.ledimyethar.com/" target="_blank" method="GET">
<input type="submit" value="လယ္တီေျမသားမွၾကိဳဆိုပါ၏">

</form>

သည္လိုေလး ေတြ႕ရပါ့မယ္... အနီေရာင္နဲ႕ လင့္ေနရာ စာသားေနရာမွာ လိုူအပ္သလို ေျပာင္းလဲ သုံးနိဳင္ပါတယ္...

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...
www.aungsanmks.blogspot.com 
www.ledimyethar.com တို႕ရဲ႕ cbox မွာ ေျပာခဲ့ၾကပါေနာ္...

Button Hover Style လွလွေလးဖန္တီးၾကစို႕






လယ္တီေျမသား


 
ေဆာ့၀ဲလ္ျမိဳ႕ေတာ္



ကဲသည္လို Button Hover ေလးေတြနဲ႕ ေရးၾကမယ္ဆိုရင္ နည္းလမ္းေလးကို မွ်ေ၀လုိက္ရပါတယ္...လုပ္နည္းေလးကလဲ လြယ္ကူပါတယ္... ပထမဆုံးေအနနဲ႕..

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ..
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
             ]]></b:skin>   ကုဒ္ေလးကိုရွာလိုက္ပါေနာ္...ေတြ႕ျပီဆိုတာနဲ႕
သူ႕အေပၚမွာ ကပ္လွ်က္  ေအာက္ကဇယားထဲကကုဒ္ေတြကို ထည့္ေပးလုိက္ပါ။
 

.hb-buttons{
background-color:#4b3f39;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.hb-buttons:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.hb-buttons:before {
background-color:#322620;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAH1Kp49wbPh_Nse5m0Nd10BYK3Fk30VilA4jgujgfKyy1PWyBLBir7xt20Jq1RCdaZemaW0K-lYQAhqdZGxoagyalPULxfHIipbOeY-4eZTh7ISy6wFaCkWCojClca-2p9LdNq-oBio/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.hb-buttons:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

အိုေကျပီးးတာနဲ႕ save template လု္ပလိုက္ပါေတာ့... ကဲစမယ္ေနာ္..
Button လွလွေလးေတြနဲ႕ လင့္ညႊန္ဖို႕...ေအာက္ကကုဒ္ေလးကိုဘဲ သုံးလုိက္ပါ..

<a href="လင့္ကိုသည္မွာထည့္ပါ" class="hb-buttons">အမည္ထည့္ပါ</a>

အသုံးျပဳနည္း  ။     ။

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲထည့္ေရးလိုက္ပါ။
 


အဆင္ေျပပါတယ္..
အဆင္ေျပမယ္လို႕႔ ေမွ်ာ္လင့္ပါတယ္ေနာ္...
အခက္ခဲရွိပါက c-box မွာေအာ္ခဲ့ၾကပါ..
ေအာင္ေအာင္ိ(မကစ)

Button စတိုင္လွလွေလးေတြ သုံးမယ္ဆိုရင္ ( Blogger Only )

 
 ကဲဗ်ာ   မိမိတို႕ေဘလာ့မွာ   ခုလို လွပေသသပ္တဲ့   Button  လွလွေလးေတြကို သုံးလိုပါက...နည္းလမ္းေလးကိုမွ်ေ၀ခံစားလုိက္ပါျပီေနာ္... လုပ္နည္းနဲ႕  လိုအပ္တဲ့ ကုဒ္ေတြကို ေအာက္မွာ ေလ့လာလိုက္ပါေနာ္.....

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။


]]></b:skin>    ဆိုတာကိုရွာလိုက္ပါ...တကယ္လို႕မေတြ႕ခဲ့ရင္  b:skin   ကိုရွာပါ
ဘာလို႕လဲဆိုောတ့ တခ်ိဳ႕ကုဒ္ေတြကို  စာတိုင္မွာ မွ်ားအမည္းေလးနဲ႕  ေခါက္ထားတတ္လို႕ပါ... က်ေနာ္ လက္ေတြ႕ရွာ ၾကည့္တာေတာ့   ]]></b:skin> 
ကိုေတြ႕ပါတယ္....အဆင္မေျပမွာစိုးးလို႕ပါ...ေတြ႕ျပီဆိုတာနဲ႕... သူမတိုင္ခင္အေပၚကကပ္လ်က္ေပါ့ ေနာ္
ေအာက္ကေပးထားတာေတြ ေကာ္ပီယူ  ထည့္ေပးလိုက္ပါ...ေနာက္  မိမိတက္ပလက္ကို  ေဆ့လို႕ရပါျပီ




   ကဲ  မိမိတို႕အသုံးလိုတိုင္း  လိုအပ္တဲ့ ကာလာနဲ႕ လိုအပ္သလို ေအာက္မွာ ယူသုံးနိဳင္ၾကပါျပီေနာ္။




<span class="excitinground"><a class="red" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>
<span class="excitinground"><a class="orange" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>
<span class="excitinground"><a class="green" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>
<span class="excitinground"><a class="blue" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>
<span class="excitinground"><a class="gray" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>
<span class="excitinground"><a class="dark" href="http://www.aungsanmks.com/">YOUR TEXT</a></span>

  မွတ္ခ်က္   ။     ။ http://www.aungsanmks.com/ ေနရာမွာ မိမိတို႕ လင့္အစားထိုးပါ

                       YOUR TEXT  ေနရာမွာ button  ေပၚတင္လိုေသာ စာသားေရးပါ။

အဆက္ေျပၾကပါေစလို႕ ဆုေတာင္းရင္း   ေလးစားစြာျဖင့္

ဘေလာ့ခရီးသည္

Button Style လွလွေလးေတြ လာျပီေနာ္ ( Blogger Only )

 
မဂၤလာပါ  ဘေလာ့ခရီးသည္ ပရိတ္သတ္ၾကီးးေရ...ခုတင္တဲ့နည္းလမ္းေလးကေတာ့  မိမိတို႕ဘေလာ့ေပးမွာ   Button  လန္းလန္းေလးေတြ သုံးျခင္သေူတြအတြက္ နည္းလမ္းေကာင္းေလးပါ..
ဒါေလးကေတာ့ ၄ မ်ိဳးတင္ေပးထားပါတယ္...  အၾကီး...အလတ္...အေသး..ေသး၀ိုင္း...ဆိုတဲ့
ဆိုဒ္အရြယ္အစား  ေတြကို ခြဲျခားတယ္ျပေပးလိုက္ပါတယ္ေနာ္... လိုအပ္သူမ်ားသုံးဆြဲ နိဳင္ပါတယ္..
ကဲ ေအာက္မွာ နည္းလမ္းနဲ႕အတူ.... လိုအပ္ေသာကုဒ္ေတြကို ေလ့လာ လိုက္ပါ
 ►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။
]]></b:skin>   သည္ကုဒ္ကိုရွာလိုက္ပါ..
 ေတြ႕ျပီဆိုတာနဲ႕ သူ႕အေပၚကကပ္ျပီး  ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကိုထည့္လိုက္ပါ။





ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို ေဆ့လို႕ရပါျပီေနာ္.... ေအာက္မွာ သုံးရမည့္ကုဒ္ေတြပါ....

Big Buttons :

<a href="LINK HERE" class="button big blue">TEXT HERE</a><a href="LINK HERE" class="button big green">TEXT HERE</a><a href="LINK HERE" class="button big orange">TEXT HERE</a><a href="LINK HERE" class="button big gray">TEXT HERE</a>


 Medium Buttons :


<a href="LINK HERE" class="button medium blue">TEXT HERE</a>
<a href="LINK HERE" class="button medium green">TEXT HERE</a>
<a href="LINK HERE" class="button medium orange">TEXT HERE</a>
<a href="LINK HERE" class="button medium gray">TEXT HERE</a>
 Small Buttons :


<a href="LINK HERE" class="button small blue">TEXT HERE</a>
<a href="LINK HERE" class="button small green">TEXT HERE</a>
<a href="LINK HERE" class="button small orange">TEXT HERE</a>
<a href="LINK HERE" class="button small gray">TEXT HERE</a>
Small Rounded Buttons :

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small green rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a>
<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>


   မွတ္ခ်က္    ။     ။     LINK HERE    ေနာမွာ မိိမိတို႕ ညႊန္ေသာလင့္ ထည့္ပါ။

TEXT HERE      ေနရာမွာ မိမိတို႕ ေရးလိုေသာ စာသားကိုေရးပါ။

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 
ဘေလာ့ခရီးသည္ 
www.ledimye.blogspot.com 
www.aungsanmks.com 
www.ninilayy.blogspot.com 
တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Blog မွာ WaterEffect CSS Download Buttons ထဲ့နည္း



      ထည့္နည္းေလးကေတာ့
   ===============
►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။


Ctrl + F အကူအညီနဲ႕ ]]></b:skin> ကိုရွာပါ၊ေတြ႕ျပီဆိုရင္

]]></b:skin> ရဲ႕အေပၚမွာ Cursor ခ်ျပီး ေအာက္ပါ Code မ်ားကူးထဲ့ျပီး Save Template
ကိုႏိုပ္ပါ။


.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0A6Q00lA0TJLPZNGqBt3Ddc3GuoRFKpe9dzt-lin2wqbNZfs6LJPUW3Gs5cukUl0i_ZtYBeASarjd_d0n62Ge1A5c84kXwVh-QqcJNVHpQXc0t7cVKqRKSCMGPNuqiHcP2tS5tbVFYxnj/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

ေအာက္က Code ေတြကကိုယ္ပိုစ့္တင္တိုင္း Download link ေပးတဲ့ေနရာမွာသံုး
ရမဲ့ Code ေတြပါ။အဲဒီ Code ကို Notepad နဲ႕ Save ထားျပီးေနာက္ပိုင္း post တင္
တုိင္းဆက္လက္အသံုးခ်ႏိုပ္ပါျပီဗ်ာ.....

<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>

အနီေရာင္ျပထားတဲ့ Blue,orange စသည္တို႕က Download button ေတြကိုအေရာင္
ေတြပါ

Your Link ေနရာမွာ Download link ထဲ့ေပးပါ

Live Demo ဆိုတဲ့ေနရာမွာ ႏွစ္သက္ရာေရးလို႕ရပါတယ္နမူနာအေနနဲ႕ Download
ရယူရန္ Click ဆိုျပီးထဲ့ျပထားပါတယ္။
                                           REF: Here 

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဘေလာ့ခရီးသည္မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္.. ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးမ်ားအား ဆက္လက္ လည္ပါတ္လိုပါက ***************************************
ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
လယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ