CSS3 Animated Button
CSS3 ဆိုပြီး အသစ်ထွက်လာတဲ့ နောက်ပိုင်းမှာ နောက်ခံကို အထပ်ထပ် သုံးလို့ရတဲ့ ပုံစံတွေ ပါလာပါတယ်။ Multiple Background လို့ခေါ်ပါတယ်။ အဲဒီလို Multiple Background ကို အသုံးပြုပြီး အရင်တုန်းက Flash တို့ Javascript တို့နဲ့မှ ရတဲ့ Animated Backgroud ကို အသုံးချလို့ ရလာပါတယ်။ အဲဒီအတွက် နမူနာကောင်းတစ်ခုကို tutorialzine မှာ တွေ့တဲ့အတွက် ပြန်မျှဝေလိုက်ပါတယ်။
HTML
HTML မှာ အဲဒီ CSS3 Button ကို သုံးချင်တယ်ဆိုရင် button.css ကို ကြော်ငြာပြီး အောက်မှာပြထားတဲ့ အတိုင်း သုံးမယ် ဆိုတာနဲ့ တန်းသုံးလို့ ရပါတယ်။
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>CSS3 Animated Buttons</title> <link rel="stylesheet" type="text/css" href="button.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <a href="#" class="button big blue">Big Button</a> <a href="#" class="button medium blue">Medium Button</a> <a href="#" class="button small blue">Small Button</a> </div> </body> </html>
သူ့ မူရင်း Tutorials မှာတော့ အရောင် လေးမျိုးလောက်အထိ အထောက်အပံ့ပေးနိုင်ပါတယ်။ ကျွန်တော်ကတော့ တစ်ခုပဲ စမ်းသပ်ကြည့်ပြီး ပြန်မျှဝေ လိုက်တာပါ။ အတော်လေးကို ပြည့်စုံတဲ့ Tutorials တစ်ခုဖြစ်ပြီး မူကွဲ Idea တွေ အများကြီး ထုတ်လို့ရနိုင်ပါတယ်။ နောက် multiple class သုံးသွားတဲ့ ပုံစံကိုလည်း နမူနာယူနိုင်ပါတယ်။ ပထမ button ဆိုတဲ့ ပင်မ class ကို ယူတယ်။ နောက် Size အတွက် သတ်မှတ်ထားတဲ့ big medium small စတဲ့ class တွေကို ယူတယ်။ နောက်ဆုံးမှာတော့ အရောင်အတွက် class ကို ယူပါတယ်။ အဲဒီလို class သုံးမျိုးကို လှည့်သုံးသွားတဲ့ ပုံစံကို လေ့လာကြည့်မယ်ဆိုရင် reusable ဖြစ်အောင် ဘယ်လိုလုပ်လဲဆိုတာကို လေ့လာနိုင်ပါတယ်။ Blue အတွက် စမ်းထားတဲ့ CSS ကတော့ အောက်မှာ ပြထားတဲ့ အတိုင်းပါပဲ။
.button{
font:15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
background-position:bottom left;
background-image:url(‘button_bg.png’);
/* CSS3 background positioning property with multiple values. The background
images themselves are defined in the individual color classes */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Applying a default border radius of 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* A 1px highlight inside of the button */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* A more rounded button */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* A fallback background color */
background-color: #48b5f2;
/* Specifying a version with gradients according to */
background-image: url(‘button_bg.png’), url(‘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(‘button_bg.png’), url(‘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(‘button_bg.png’), url(‘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(‘button_bg.png’), url(‘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));
}
အဲဒီအထဲမှာ Background အဖြစ်သုံးတဲ့ button_bg.png ကို အောက်မှာ ပေးထားတဲ့ Zip ဖိိုင်ထဲမှာ ရယူနိုင်ပါတယ်။ ထွက်လာတဲ့ Result ကတော့
Project Zip ဖိုင်ကို လိုချင်တယ်ဆိုရင်တော့
Download Link - http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/css3-buttons.zip
Demo Link – http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/css3-buttons.html
Facebook comments:
4 Responses
Leave a comment
About the Author
Ads
တစ်ခြား website မှ ဘာသာပြန်ပြီးဖော်ပြတယ်ဆိုရင် Credit ပေးတဲ့ အကျင့်လေးလုပ်ကြည့်ပါလား။
ပိုပြီးတော်လာပြီး…လူတကာလေးစားခြင်းခံရမှာပါ….
စာထဲမှာကို ဘယ်ကပြန်ဝေမျှပါတယ်ဆိုတာ ရေးထားပါတယ်ခင်ဗျ။
It’s a very nice tutorial. Thank you so much.
ကျေးဇူးတကယ်တင်ရှိပါတယ်
နောက်ထပ်အများကြီးဝေမျှနိုင်ပါစေရှင်..