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

ေရႊမိုးညိဳ | 6:12 pm | Best Blogger Tips





လယ္တီေျမသား


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



ကဲသည္လို 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/AVvXsEgX9pErHx_rjJ1FtU_grC6YJ5vPhyphenhyphenIaQzbpUJ97UGzIPD7LBAWbyHHM9wu6dITH0VqIl8BmB89x7yY_1Bmrai2kJfKXwCIVQq4LFPvS3bJrtWMkhnfEI4ybPPAFhv8lbYIjhBUlpUP9aPQ/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 မွာေအာ္ခဲ့ၾကပါ..
ေအာင္ေအာင္ိ(မကစ)

Like Box ေလးမွအမွန္ျခစ္မေပၚေသးရင္ like လုပ္ေပးခဲ့ပါဦးေနာ္..
{[['']]}

0 comments:

Post a Comment

⋙-⋗( က်ေနာ္တင္သမွ်ဖတ္ခ်င္ရင္⋙ℒike⋘သြားပါ)⋖-⋘

ေဖ့ဘုတ္မွာကြန္မန္႔ေပးခ်င္ရင္ပံုကိုကလစ္ပီးကြန္မန္႔ေပးႏိုင္ပါပီ




************************************

*အဆင္မေျပတာေတြရွိခဲ့ရင္
*
*( viber whatsapp wechat )
*
* အဆင္ေျပမဲ့ေနရာေတြကေန
*
* SMS ပို႔ပီးအကူညီေတာင္းႏိုင္ပါတယ္
*
* ခ်က္ေဘာက့္ေတြကေနတဆင့္လိုခ်င္တာေတြ
*
* ေတာင္းထားႏိုင္ပါတယ္
*
* အဆင္မေျပခဲ့တာေတြရွိခဲ့ရင္လည္း
*
*ခြင့္လႊတ္သီးခံေပးက်ပါေနာ္..
*
************************************