အားလုံးပဲ မင်္ဂလာပါ။ ညီမကတော့ Spiceworks Myanmar မှာ Junior Web Designer အဖြစ် တာဝန်ယူလုပ်ကိုင်နေတဲ့ ခိုင်သဥ္ဇာသွယ် ဖြစ်ပါတယ်။ ဒီတစ်ပတ်မှာတော့ “Animated Buttons” ဆိုတဲ့ခေါင်းစဉ်နဲ့ CSS animated buttons တွေအကြောင်းကို မျှဝေပေးချင်ပါတယ်။
ပထမဆုံး အောက်ပါ code ကို run ပြီး button တစ်ခု create လုပ်လိုက်ပါ။ button ရဲ့ after ကိုလည်း common အနေနဲ့ ထည့်ထားပါ့မယ်။ ဒါက ပုံမှန် button တစ်ခု create လုပ်တဲ့ code ပါပဲ။
.btn {
display: inline-block;
font-family: "Ubuntu Mono", monospace;
font-size: 20px;
font-weight: 700;
color: #9B8C7C;
background: none;
border: 1px solid #9B8C7C;
border-radius: 50px;
cursor: pointer;
padding: 20px 60px;
/* main point */
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.btn::after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
Hover Background Effect
button ကို hover လုပ်ရင် background color fill ဖြစ်သွားတဲ့ style လေး ဖန်တီးကြည့်ပါ့မယ်။ ပုံမှန် background fill ဖြစ်ချင်တာအတွက် အောက်က code ကိုသုံးပါ။
.btn-bg-fill:hover {
color: #fff;
background-color: #EEA91E;
border: none;
}
smooth ဖြစ်တဲ့ animation ပုံစံလေးအတွက် အဓိကအနေနဲ့ transition က အလုပ်လုပ်သွားတာ ဖြစ်ပါတယ်။
vertically fill ဖြစ်ချင်တာအတွက် အောက်က code ကိုသုံးပါ။
.btn-fill-v {
z-index: 1;
}
.btn-fill-v::after {
width: 100%;
height: 0;
top: 0;
left: 0;
z-index: 0;
background-color: #EEA91E;
}
.btn-fill-v:hover {
color: #fff;
}
.btn-fill-v:hover::after {
height: 100%;
}
vertical fill ဖြစ်ချင်တာဖြစ်တဲ့အတွက် width အပြည့်ပေးထားပြီး height ကို 0 ပဲပေးထားပါတယ်။ မူလအစမှာ မမြင်ရအောင်လို့ပါ။ top ကနေ fill ဖြစ်ချင်ရင် top မှာ 0 ပေးထားပြီး bottom ကနေ fill ဖြစ်ချင်ရင်တော့ bottom ကို 0 ပြောင်းပေးရပါမယ်။
horizontally fill ဖြစ်ချင်တာအတွက် အောက်ပါ code ကိုသုံးပါ။
.btn-fill-h {
z-index: 1;
}
.btn-fill-h::after {
width: 0;
height: 100%;
top: 0;
left: 0;
z-index: 0;
background-color: #EEA91E;
}
.btn-fill-h:hover{
color: #fff;
}
.btn-fill-h:hover::after {
width: 100%;
}
horizontal fill ဖြစ်ချင်တာဖြစ်တဲ့အတွက် height အပြည့်ပေးထားပြီး width ကို 0 ပဲပေးထားပါတယ်။ မူလအစမှာ မမြင်ရအောင်လို့ပါ။ left ကနေ fill ဖြစ်ချင်ရင် left မှာ 0 ပေးထားပြီး right ကနေ fill ဖြစ်ချင်ရင်တော့ right ကို 0 ပြောင်းပေးရပါမယ်။
Hover Slide
နောက်ထပ်အနေနဲ့ hover လုပ်ရင် icon လေး slide in ဖြစ်လာတဲ့ style နဲ့ background လေး slide in ဖြစ်လာတဲ့ style လေး ဖန်တီးကြည့်ပါ့မယ်။
.btn.btn-slide {
color: #fff;
background-color: #F26454;
border: none;
}
.btn-slide::before {
position: absolute;
content: '';
background: url(./images/arrow-right.svg);
width: 20px;
height: 20px;
top: 50%;
left: 70%;
transform: translateY(-50%);
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.btn-slide:hover::before {
left: 80%;
opacity: 1;
}
မူလမှာ icon ကို left ကနေ 70% ထားထားပြီး opacity: 0; နဲ့ ဖျောက်ထားပါတယ်။ hover လုပ်တဲ့အချိိန်မှ opacity: 1; ပေးပြီး left ကနေ 80% ထားလိုက်တဲ့အတွက် slide in ဖြစ်သွားတဲ့ ပုံစံမျိုးလေး မြင်ရမှာဖြစ်ပါတယ်။ ညာဘက်ကနေ slide in ဖြစ်ချင်ရင်တော့ left နေရာမှာ right ကို ပြောင်းပေးရပါမယ်။
background slide in style အတွက် အောက်ပါ code ကို သုံးနိုင်ပါတယ်။
.btn.btn-bg-slide {
padding: 12px 18px;
overflow: visible;
color: #fff;
background-color: none;
border: none;
z-index: 1;
}
.btn.btn-bg-slide::after {
content: '';
width: 45px;
height: 45px;
top: 0;
left: 0;
border-radius: 50px;
background-color: #F26454;
}
.btn-bg-slide:hover::after {
width: 100%;
}
hover မလုပ်ခင်မှာ width ကို ပေါ်ချင်သလောက် စက်ဝိုင်းတစ်ဝိုင်းစာ 45px ပဲပေးထားပြီး hover လုပ်တဲ့အချိန်မှာ 100% အပြည့်ပေးလိုက်တာပါ။
Box Shadow Button
.btn.btn-shadow {
color: #fff;
background-color: #F26454;
border: none;
box-shadow: #C92E46 0px 8px 0px 0px;
}
.btn-shadow:hover {
box-shadow: #C92E46 0px 6px 0px 0px;
}
.btn-shadow:active {
box-shadow: #C92E46 0px 0px 0px 0px;
transform: translateY(5px);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
မူလ box-shadow တစ်ခုပေးထားပြီး hover လုပ်တဲ့အချိန်မှာ Y ရဲ့ px ကို နည်းနည်းလျှော့လိုက်တာပါ။ active ဖြစ်တဲ့အချိန်မှာတော့ box-shadow အကုန်ဖျောက်လိုက်ပြီး ပိုလှသွားအောင် translateY နဲ့ အောက်ကိုနည်းနည်းတွန်းလိုက်တာဖြစ်တဲ့အတွက် button နှိပ်လိုက်ရသလိုပုံစံမျိူးကို box-shadow နဲ့ မျက်စိကစားထားတာပါ။ smooth ဖြစ်အောင် အရေးကြီးတဲ့ transition ကိုတော့ မမေ့ပါနဲ့။
အောက်ပါ code ကတော့ class name ခေါ်သုံးတဲ့ နမူနာ html ပုံစံလေးပါ။
demo နဲ့ code ကိုတော့ အောက်က demo link မှာ ဝင်ရောက်ကြည့်ရှုနိုင်ပါတယ်။ ကျေးဇူးအများကြီးတင်ပါတယ်။
Demo
https://carrot-animated-buttons.vercel.app/
References
