Design

Button Hover Effects Using HTML & CSS

အားလုံးပဲ မဂၤလာပါခင္ဗ်။

ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ ေမာင္ေက်ာ္စိုးႏိုင္ျဖစ္ပါတယ္ခင္ဗ်။ ဒီတစ္ပတ္မွာေတာ့ website တစ္ခုေရးဆြဲရာမွာ အစိတ္အပိုင္းတစ္ခု အေနနဲ႔ အေရးပါတဲ့ Button Hover Effects မ်ားကို ဘယ္လို ဖန္တီးၿပီး အသုံးျပဳရမလဲဆိုတာ ႐ိုး႐ိုးရွင္းရွင္းနဲ႔ နားလည္ရလြယ္ကူေအာင္ မွ်ေဝေပးသြားမွာ ျဖစ္ပါတယ္။

What is Button?
Website ေတာ္ေတာ္မ်ားမ်ားမွာ Button က မပါမျဖစ္အေရးပါတဲ့ website တစ္ခုရဲ႕ အစိတ္အပိုင္းတစ္ခုျဖစ္ပါတယ္။ User မ်ားေ႐ြးခ်ယ္လိုက္တဲ့ လုပ္ေဆာင္ခ်က္၊ ေ႐ြးခ်ယ္မႈမ်ား ေပၚမူတည္ၿပီး ဆက္သြယ္ေပးႏိုင္ေသာ အစိတ္အပိုင္းတစ္ခုျဖစ္ပါတယ္။ Website မွာဆိုရင္ button ကို <button> element နဲ႔ ကိုယ္စားျပဳၿပီး clickable button အျဖစ္သတ္မွတ္ထားပါတယ္။ Button မ်ားကို မ်ားေသာအားျဖင့္ forms, home page, dialog box အစရွိတဲ့ေနရာမ်ားမွာ ထည့္သြင္းအသုံးျပဳေလ့ရွိၾကပါတယ္။
အျခားေသာ page တစ္ခုသို႔ ခ်ိတ္ဆက္ေပးသည့္ link တစ္ခုအေနနဲ႔ျဖစ္ေစ၊ form submit အေနနဲ႔ျဖစ္ေစ၊ purchase function အေနနဲ႔ျဖစ္ေစ function အမ်ိဳးမ်ိဳးအေနျဖင့္ လုပ္ေဆာင္ေပးလ်က္ရွိပါတယ္။

Button Type
Button တစ္ခုမွာဆိုရင္ button behavior အေနျဖင့္ types (၃)မ်ိဳးရွိပါတယ္။
1. submit
2. reset
3. button

1. Submit
Button type submit ကို user မွ server ဆီကို ပိုခ်င္တဲ့ form data ေတြကို ပို႔ဖို႔အတြက္ button type submit ကို အသုံးျပဳပါတယ္။

2. Reset
Button type reset ကို ထိန္းခ်ဳပ္မႈေအာက္မွရွိတဲ့ တန္ဖိုးေတြကို ျပန္လည္သတ္မွတ္ဖို႔အတြက္ button type reset ကို အသုံးျပဳပါတယ္။

3. Button
Button type button ကေတာ့ no default behavior ျဖစ္ၿပီး သူ႔ကိုႏွိပ္ရင္ ေျပာင္းလဲမႈမရွိတာကိုေတြ႕ရပါတယ္။ Button type button ကို client-side script မွာ event တစ္ခုအေနနဲ႔ အသုံးျပဳပါတယ္။

Why Hover effect button is used?
Website ေတာ္ေတာ္မ်ားမ်ားမွာဆိုရင္ button ကို hover effect ပါတဲ့  hover effect button မ်ားအျဖစ္ အသုံးျပဳလာၾကပါတယ္။ မိမိ website ရွိ Button မ်ားကို hover effect ထည့္သြင္းၿပီး ဖန္တီးထားလွ်င္ users မ်ားအား  attention ပိုျဖစ္ေစႏိုင္သလို ပိုၿပီးေတာ့လည္း ဆြဲေဆာင္ႏိုင္တဲ့ website ‌ေကာင္းတစ္ခု ျဖစ္လာနုိင္ပါတယ္။

ဒါေၾကာင့္ website ေတာ္ေတာ္မ်ားမ်ားမွာ အမ်ားဆုံး အသုံးျပဳေလ့ရွိတဲ့ button hover effects (၁၀)မ်ိဳး ကို ဘယ္လိုcreate လုပ္ရမလဲဆိုတာကို ေျပာျပေပးသြားမွာျဖစ္ပါတယ္။
Button တစ္ခုကို hover effect ထည့္ျပီး create လုပ္တဲ့အခါမွာလည္း ႐ိုး႐ိုးရွင္းရွင္းနဲ႔ style လဲရွိၿပီး နားလည္လြယ္ေအာင္ ေရးျပသြားမွာျဖစ္ပါတယ္။

Creating Button with HTML and CSS
ပထမဆုံးအေနျဖင့္ Html file တစ္ခုကို create လုပ္ၿပီး code ထဲမွာ button တစ္ခုကိုေအာက္ပါအတိုင္း create လုပ္ထားပါတယ္။ ဖန္တီးထားတဲ့ html file ကို အေျခခံၿပီး css ကိုအသုံးျပဳၿပီး hover effect ကို ထည့္ျပသြားမွာျဖစ္ပါတယ္။

HTML file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hover Animation</title>
</head>
<body>
<div class="container">
<!-- button creation -->
<div class="btn">Button</div>
</div>
</body>
</html>

CSS

*{
padding: 0 ;
margin: 0;
}
.container{
width: 100%;
text-align: center;
}

.btn{
transition: .2s cubic-bezier(0.45,0,0.55,1);
}
.btn {
background: #ff701e;
border: 2px solid #ff701e;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 300px;
padding: 15px 40px;
text-align: center;
margin: 0 auto 50px;
top: 50px;
position: relative;
font-size: 25px;
}

1.Button Color Reverse Effect
reverse
Button color reverse effect မွာဆိုရင္ button ရဲ႕ background color နဲ႔ button ဆိုတဲ့ text စာသား အေရာင္ကို color reverse effect ျဖစ္ေအာင္ ေျပာင္းလဲလိုက္ျခင္းျဖစ္ပါတယ္။
Hover Effect အေျပာင္းအလဲမွာ effect ကို soft and smooth ျဖစ္ဖို႔ codingပိုင္းမွာ transition time ထည့္ေပးဖို႔လိုအပ္ပါတယ္။

<div class="btn reverse">Button</div>
.btn{
transition: .2s cubic-bezier(0.45,0,0.55,1);
}
.btn.reverse:hover{
background: #fff;
color: #ff701e;
}

2.Button Letter Spacing Effect
spacing
Button letter spacing effect မွာဆိုရင္ button ေပၚကို hover တင္လိုက္ရင္ button ထဲမွာရွိေသာ text spacing ကို widden ျဖစ္ေအာင္ ခ်ဲ႕လိုက္ျခင္းျဖစ္ပါတယ္။ Coding ပိုင္းအေနျဖင့္ letter-spacingကို အသုံးျပဳထားျခင္းျဖစ္ပါတယ္။

<div class="btn spacing">Button</div>
.btn.spacing:hover{
  letter-spacing: 10px;
}

3.Button Color Reverse Effect + Button Letter Spacing Effect
mix
Button letter spacing effect ကို တစ္ခုတည္း အသုံးနည္းၿပီး း အေပၚက Button Color Reverse effect ႏွင့္အမ်ားဆုံးတြဲသုံးပါတယ္။

<div class="btn mix">Button</div>
.btn.mix:hover{
  background: #ffffff;
  color: #ff701e;
  letter-spacing: 10px;
}

4.Button Float Effect
float
Button float effect ကေတာ့button ကို အေပၚတက္လာႏိုင္သလို ေအာက္ကိုႏွစ္ျမဳပ္သြားတဲ့ effect မ်ိဳးျဖစ္ပါတယ္။ coding ပိုင္းမွာဆိုရင္ transform ကို အသုံးျပဳၿပီး effect create လုပ္ျခင္းျဖစ္ပါတယ္။

<div class="btn float">Button</div>
.btn.float:hover{
  transform: translateY(-30px);
}

5.Button Press Effect
press
Button press effect မွာ button ပုံစံက three dimensional ရွိၿပီး hover တင္လိုက္ရင္ button ကို press ႏွိပ္လိုက္တဲ့ effect မ်ိဳးျဖစ္ပါတယ္။ box shadow ႏွင့္ transform ကို အသုံးျပဳၿပီး ျပဳလုပ္ႏိုင္ပါတယ္။

<div class="btn press">Button</div>
.btn.press{
  box-shadow: 0px 5px 0 #d01a0a;
}
.btn.press:hover{
  transform: translateY(5px);
  box-shadow: none;
}

6.Button Slide effect
slide
Button slide effect ကေတာ့ ေဘးကေန အလ်င္အျမန္ဝင္ေရာက္ၿပီး ေျပာင္းလဲလိုက္ေသာ effect မ်ိဳးျဖစ္ၿပီး အေပၚေအာက္ ဘယ္ညာ ေျပာင္းလဲ အသုံးျပဳလို႔ရပါတယ္။ ေဘးကေနဝင္လာေသာ slide ကို pseudo element (:: after) ကို အသုံးျပဳၿပီးဖန္တီးရပါတယ္။ Effectကိုေတာ့ transform scale ႏွင့္ transform-origin ကို အသုံးျပဳထားျခင္းျဖစ္ပါတယ္။

<div class="btn slide">Button</div>
.btn.slide{
  background: #ffffff;
  color: #ff701e;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn.slide::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ff701e;
  top:0;
  left: 0;
  transform: scale(0,1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45,0,0.55,1);
  z-index: -1;
}
.btn.slide:hover{
  color: #ffffff;
}
.btn.slide:hover::before{
  transform: scale(1,1);
}

7.Button Slide Diagonal Effect
diagonal
Button slide diagonal effect ကေတာ့ slide effect ဖန္တီးပုံနဲ႔အတူတူျဖစ္ၿပီး ကန႔္လန႔္ျဖတ္ဝင္လာေသာ effect မ်ိဳးျဖစ္ပါတယ္။ ကန္႔လန႔္ျဖတ္ဝင္လာေသာ effect ကိုေတာ့ transform screwY ႏွင့္ transform scale ကို ေပါင္းစပ္ၿပီး အသုံးျပဳထားျခင္း ျဖစ္ပါတယ္။

<div class="btn slide diagonal">Button</div>
..btn.slide.diagonal::before{
  transform: skewY(-10deg) scale(1,0);
  height: 120px;
}
.btn.slide.diagonal:hover::before{
  transform: skewY(-10deg) scale(1,1);
}

8.Button Approaching Effect
approach
Button approaching effect ကေတာ့ ခြန္အားနဲ႔ တက္ႂကြားမႈကို ေပးတဲ့ effect မ်ိဳးျဖစ္ၿပီး transition-duration ႏွင့္ transform scale ကို ေပါင္းစပ္ၿပီး အသုံးျပဳထားျခင္း ျဖစ္ပါတယ္။

<div class="btn approach">Button</div>
.btn.approach{
   transition-duration: .4s;
}
.btn.approach:hover{
  transform: scale(1.1);
}

9.Button Gradient Effect
gradient
Button gradient effect ကေတာ့ background gradient color ႏွင့္ေရာစပ္အသုံးျပဳျခင္းျဖစ္ပါတယ္။ Coding ပိုင္းအေနျဖင့္ background size ကိုသတ္မွတ္ၿပီး position ကို ေျပာင္းလဲ အသုံးျပဳၿပီး ဖန္တီးထားျခင္းျဖစ္ပါတယ္။

<div class="btn gradient">Button</div>
.btn.gradient{
  background: linear-gradient(90deg, rgba(255,112,30,1) 0%, rgba(255,191,48,1) 50%, rgba(255,77,48,1) 100%);
  background-size: 200% 100%;
  border: none;
}
.btn.gradient:hover{
  background-position: 100% 10%;
}

10.Button Circle Center Effect
circle
Button circle center effect ကေတာ့ ဖန္တီးထားတဲ့ background အေရာင္က button အလည္ကေန စက္ဝိုင္းပုံစံေျပာင္းၿပီး spread ျဖစ္သြားတဲ့ effect မ်ိဳးျဖစ္ပါတယ္။ codingပိုင္းမွာဆိုရင္ transition and transform ကိုအသုံးျပဳၿပီး ဖန္တီးထားျခင္းျဖစ္ပါတယ္။

<div class="btn circle">Button</div>
.btn.circle {
  background: #fff;
  color: #ff701e;
  overflow: hidden;
  position: relative;
  transition-duration: .4s;
  z-index: 2;
}
.btn.circle::after {
  background: #ff701e;
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.btn.circle:hover {
  color: #fff;
}
.btn.circle:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity .8s, transform .6s ease-in-out;
}

ဒါေၾကာင့္ အထက္မွာရွင္းျပေပးခဲ့တဲ့ အသုံးမ်ားတဲ့ button effects (၁၀)မ်ိဳးကို နားလည္ၿပီး
မိမိ website ရွိ button မ်ားကိုလည္း button effect ထည့္ၿပီးအသုံးျပဳမယ္ဆိုလွ်င္ ဆြဲေဆာင္မႈႏွင့္ လွပျပည့္စုံေသာ website တစ္ခုအေနနဲ႔ ရရွိလာေစမွာျဖစ္ပါတယ္။

အခုမွစေလ့လာမယ့္ လူေတြအတြက္ ဗဟုသုတတိုးပြားၿပီးတစ္စုံတစ္ခုအက်ိဳးရွိမယ္လို႔ ေမွ်ာ္လင့္မိပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *