লেখক: ওয়েব ডিজাইনের গোড়ার দিকে ওয়েবসাইটে বিভিন্ন ধরনের বাটন যুক্ত করার ক্ষেত্রে Image ব্যবহার করা হত, কিন্তু ওয়েব ডেভেলপমেন্টের উন্নতির সাথে সাথে এখন ডেভেলপাররা Image এর পরিবর্তে বিভিন্ন ধরনের Iconic Font ফন্ট এর মাধ্যমে CSS3 এর সমন্বয়ে বিভিন্ন ধরনের বাটন তৈরি করে ওয়েবসাইটে ব্যবহার করছেন। এতে করে এক দিকে যেমন ওয়েব পেজের Load Time বৃদ্ধি পাচ্ছে অন্যদিকে Customize করার মাধ্যমে যে কোন সময়ে ডিজাইনেরও পরিবর্তন করা সম্ভব হচ্ছে। তাছাড়াও আকর্ষণীয় ডিজাইনের বাটন ব্লগের সুন্দর্য বৃদ্ধি করার পাশাপাশি ভিজটরদের বিভিন্ন লিংকের প্রতি আকৃষ্ট করে ব্লগের Page View বৃদ্ধিতেও অবদান রাখবে।
আমরা ইতোপূর্বে আমাদের ব্লগে এ ধরনের Material Design Animated Buttons নামে আরেকটি পোষ্ট শেয়ার করেছিলাম। সে জন্য বাটনগুলি নতুনভাবে পুনঃ ডিজাইন করাতে এগুলিকে Version-2 হিসেবে নাম দেয়া হয়েছে। আজকের বাটনগুলি আমরা দুটি ডিজাইন করেছি। একটির আইকন বাম পাশে এবং অন্যটির আইকন ডান পাশে থাকবে। যার যার পছন্দ অনুসারে ইচ্ছামত বাটন যুক্ত করে নিতে পারবেন। তাছাড়াও বাটনগুলি CSS3 এবং HTML5 এর সমন্বয়ে তৈরি করাতে যে কোন ধরনের কাষ্টমাইজ করে আপনার মনেরমত করে সাজিয়ে নিতে পারবেন।
প্রথম ডিজাইনের স্টাইল শীটঃ
- প্রথমে ব্লগে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit HTML এ ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.ripple{text-align:center;display:inline-block;padding:2px 30px 2px 0;border-radius:2px;letter-spacing:.5px;border-radius:2px;text-decoration:none;color:#fff;overflow:hidden;position:relative;z-index:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
.red:before,.pink:before,.blue:before,.cyan:before,.teal:before,.yellow:before,.orange:before,.brown:before,.grey:before,.black:before{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px;padding:7px 20px;margin-right:20px}
.red:before{content:"\f06e";background:#D71C0F}
.pink:before{content:"\f019";background:#C31A53}
.blue:before{content:"\f07a";background:#1F84D5}
.cyan:before{content:"\f06e";background:#02A7BC}
.teal:before{content:"\f019";background:#027D71}
.yellow:before{content:"\f07a";color:#000;background:#E7D535}
.orange:before{content:"\f06e";background:#E98C04}
.brown:before{content:"\f019";background:#694A3F}
.grey:before{content:"\f07a";background:#8A8989}
.black:before{content:"\f06e";background:#3B3B3B}
দ্বিতীয় ডিজাইনের স্টাইল শীটঃ
- উপরের কোডগুলির পরিবর্তে নিচের CSS কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.ripple{text-align:center;display:inline-block;padding:2px 0 2px 30px;border-radius:2px;letter-spacing:.5px;border-radius:2px;text-decoration:none;color:#fff;overflow:hidden;position:relative;z-index:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
.red:after,.pink:after,.blue:after,.cyan:after,.teal:after,.yellow:after,.orange:after,.brown:after,.grey:after,.black:after{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:0;padding:7px 20px;margin-left:20px}
.red:after{content:"\f06e";background:#D71C0F}
.pink:after{content:"\f019";background:#C31A53}
.blue:after{content:"\f07a";background:#1F84D5}
.cyan:after{content:"\f06e";background:#02A7BC}
.teal:after{content:"\f019";background:#027D71}
.yellow:after{content:"\f07a";color:#000;background:#E7D535}
.orange:after{content:"\f06e";background:#E98C04}
.brown:after{content:"\f019";background:#694A3F}
.grey:after{content:"\f07a";background:#8A8989}
.black:after{content:"\f06e";background:#3B3B3B}
- এখন Template Save করে বেরিয়ে আসুন।
- নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি Plugging যুক্ত করে নিতে হবে।
পোষ্টের ভীতরে বাটন যুক্ত করার পদ্ধতীঃ
- নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
- তারপর নিচের চিত্রেরমত পোষ্ট সেকশন হতে HTML বাটনটিতে ক্লিক করুন।
- উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
- এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>
- সবশেষে পোষ্টটি Publish করলেই কাজ OK.
- নোটঃ উপরের প্রত্যেকটি লাইনে একটি করে বাটন রয়েছে। প্রতিটি বাটনের Class তার কালারের নামানুসারে করা হয়েছে, যাতেকরে সবাই সহজে তার পছন্দের বাটনটি নির্বাচন করতে পারে। যখন কোন বাটন যুক্ত করা প্রয়োজন হবে, তখন কেবলমাত্র ঐ লাইনটি যুক্ত করে দিলেই বাটন যুক্ত হয়ে যাবে।
পরিবর্তনঃ
- উপরের CSS কোডের Grey কালারের অংশগুলি হতে বাটনের রং পরিবর্তন করতে পারবেন।
- সবুজ কালারের অংশগুলি হচ্ছে Font Awesome আইকন এর Unicode সংখ্যা। এগুলি হতে বাটনের আইকনসহ বাটনের প্রথম অংশে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা যাবে। Font Awesome আইকন এর অফিসিয়ার ওয়েবসাইট হতে খুব সহজে এই Unicode গুলি পেয়ে যাবেন।
Material Design Ripple Animated Buttons:
সকল ধরনের ব্লগের কোথাও না কোথাও মাঝে মধ্যে ডেমো, ডাউনলোড, Buy Now ইত্যাদি টাইপের বাটন যুক্ত করা প্রয়োজন হয়। যদিও বাটন ছাড়াই সাধারণ লিংকের মাধ্যমে এ ধরনের ছোট কাজগুলি চালানো সম্ভব হয়, তথাপিও ব্লগের ডিজাইন এবং ভাবমূর্তি আরো স্ট্যান্ডার্ড করার স্বার্থে ব্লগে বিভিন্ন ডিজাইনের আকর্ষণীয় বাটন যুক্ত করতে হয়। তাছাড়া একটি আকর্ষণীয় স্টাইলের ডাউনলোড বা ডেমো বাটন ব্লগ পোষ্টের পাঠকদের নিংসন্দেহে ঐ লিংকে ক্লিক করতে উৎসাহিত করবে। উল্লেখ্য যে, আমরা ইতিপূর্বেও এ ধরনের Animated Demo and Download Buttons শেয়ার করেছি। আপনি ইচ্ছে করলে উপরের লিংক থেকে পোষ্টটি দেখে নিতে পারেন।
আমরা বিভিন্ন কালারের সর্বমোট ১০ টি বাটন তৈরি করেছি। এ বাটনগুলি গুগলের Material Design এর নিয়মানুসারে তৈরি করার পাশাপাশি Ripple Animation Effect প্রদান করা হয়েছে। এতেকরে বাটনে ক্লিক করার পর বাটনটি পানির ঢেউ এর মত কেপে উঠবে, যা পাঠকদের আপনার ব্লগের প্রতি আরো আকৃষ্ট করবে বলে আমি মনে করি। এই বাটনগুলি সম্পূর্ণরূপে CSS3 ও HTML5 এবং আইকনগুলি Font Awesome এর সমন্বয়ে তৈরি করা হয়েছে। এর ফলে আপনি চাইলে খুব সহজে বাটনের আইকন ও স্টাইল পরিবর্তন করতে পারবেন।
কিভাবে যুক্ত করবেন?
- প্রথমে ব্লগে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.ripple {
text-align: center;
display: inline-block;
padding: 4px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.55s linear;
-moz-animation: ripple 0.55s linear;
-ms-animation: ripple 0.55s linear;
-o-animation: ripple 0.55s linear;
animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple{
100%{opacity:0;-webkit-transform:scale(2.5)}
}
@-moz-keyframes ripple{
100%{opacity:0;-moz-transform:scale(2.5)}
}
@-o-keyframes ripple{
100%{opacity:0;-o-transform:scale(2.5)}
}
@keyframes ripple{
100%{opacity:0;transform:scale(2.5)}
}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
.red:before,.pink:before,.blue:before,.cyan:before,.teal:before,.yellow:before,.orange:before,.brown:before,.grey:before,.black:before{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px}
.red:before{content:"\f06e"}
.pink:before{content:"\f019"}
.blue:before{content:"\f07a"}
.cyan:before{content:"\f06e"}
.teal:before{content:"\f019"}
.yellow:before{content:"\f07a";color:#000}
.orange:before{content:"\f06e"}
.brown:before{content:"\f019"}
.grey:before{content:"\f07a"}
.black:before{content:"\f06e"}
- আবার কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন।
- তারপর নিচের Scripts গুলি কপি করে </body> ট্যাগের উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
$(function() {
var ink, d, x, y;
$(".ripple").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
});
//]]>
</script>
- এখন Template Save করে বেরিয়ে আসুন।
- নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি অপশনই যুক্ত করে নিতে হবে।
পোষ্টের ভীতরে বাটন যুক্ত করার পদ্ধতী
- নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
- তারপর নিচের চিত্রেরমত পোষ্ট সেকশন হতে HTML বাটনটিতে ক্লিক করুন।
- উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
- এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>
- সবশেষে পোষ্টটি Publish করলেই কাজ OK.
- নোটঃ উপরের প্রত্যেকটি লাইনে একটি করে বাটন রয়েছে। প্রতিটি বাটনের Class তার কালারের নামানুসারে করা হয়েছে, যাতেকরে সবাই সহজে তার পছন্দের বাটনটি নির্বাচন করতে পারে। যখন কোন বাটন যুক্ত করা প্রয়োজন হবে, তখন কেবলমাত্র ঐ লাইনটি যুক্ত করে দিলেই বাটন যুক্ত হয়ে যাবে।
পরিবর্তনঃ
- উপরের Css কোডের Grey কালারের অংশগুলি হতে বাটনের রং পরিবর্তন করতে পারবেন।
- লাল কালারের অংশগুলি হচ্ছে Font Awesome আইকন এর Unicode সংখ্যা। এগুলি হতে বাটনের আইকন পরিবর্তন করা যাবে। Font Awesome আইকন এর অফিসিয়ার ওয়েবসাইট হতে খুব সহজে এই Unicode গুলি পেয়ে যাবেন।
- বাটনে Ripple Animation Effect দিতে না চাইলে, ২য় ধাপের JavaScript গুলি যুক্ত করার কোন প্রয়োজন নেই।
Ripple Animation Effect:
ব্লগ/ওয়েবসাইটকে আকর্ষণীয় করার জন্য ওয়েব ডেভেলপাররা বিভিন্ন ধরনের নিত্য নতুন কৌশল অবলম্বন করছেন। বিশেষ করে HTML5 ও CSS3 কোডিং ব্যবস্থা চালু হওয়ার পর থেকে আকর্ষণীয় ওয়েব ডিজাইন করাটা অনেক সহজ একটা ব্যাপার হয়ে দাড়িয়েছে। আর সেই সাথে সাথে সবাই উঠে-পড়ে লেগেছেন যে, কিভাবে সবাই তাদের ব্লগটাকে আকর্ষণীয় করবেন। সম্প্রতি গুগল Material Design সম্পর্কে ঘোষনা দেয়ার পর হতে সবাই ওয়েবসাইটকে Material Design করার জন্য আর বেশী উঠে-পড়ে লেগেছেন। সেই জন্য একটা ব্লগকে প্রফেশনাল ডিজাইন করার জন্য আমরা ছোট একটা অংশ আপনাদের সাথে শেয়ার করতে যাচ্ছি।
আমরা আজ যেটি শেয়ার করছি সেই Effect টি আপনার ব্লগের যে কোন অংশে যুক্ত করতে পারবেন। এটি যুক্ত করার ফলে ভিজিটর যখন আপনার ঐ অংশটিতে ক্লিক করবে তখন পানির ঢেউ এর আকর্ষণীয় একটি ইফেক্ট দেবে। আমাদের ব্লগের ম্যানুবারে এই ইফেক্টটি ব্যবহার করছি, যেখানে ক্লিক করলে বিষয়টি ভালভাবে বুঝতে পারবেন অথবা নিচের বাটনটিতে ক্লিক করলে এর সম্পর্কে পরিষ্কার ধারনা পাবেন।
কিভাবে যুক্ত করবেন?
- প্রথমে ব্লগে লগইন করুন।
- তারপর ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।
- কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
/* Ripple Animation
--------------------------------------------------- */
@-webkit-keyframes ripple-animation{
0%{-webkit-transform:scale(.01);transform:scale(.01)}
100%{-webkit-transform:scale(5);transform:scale(5)}
}
@keyframes ripple-animation{
0%{-webkit-transform:scale(.01);transform:scale(.01)}
100%{-webkit-transform:scale(5);transform:scale(5)}
}
- কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
- এখন নিচের Scripts গুলি </head> ট্যাগের ঠিক উপরে পেষ্ট করুন।
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
//]]>
</script>
- সবশেষে Template Save করুন।
কিভাবে HTML অংশ যুক্ত করবেন?
- আপনি যে অংশে এই ইফেক্ট দিতে চান সেই অংশের HTML অংশটি খোঁজে বের করতে হবে। উদাহরণ স্বরূপ ধরুন আপনি আপনার ব্লগের Menu Bar এ এই ইফেক্টটি দিতে চান। সাধারণত আপনার ম্যানুবারটির HTML নিচেরমত হতে পারে।
<li><a href='#'> Home </a></li>
অথবা
<li><a class='menu' href='#'> Home </a></li>
- ইফেক্টটি যুক্ত করার পর আপনার লাইনটি হবে নিচেরমত।
<li><a class='ripple-effect' href='#'> Home </a></li>
অথবা
<li><a class='menu ripple-effect' href='#'> Home </a></li>
- আপনি যে জায়গায় এই ইফেক্ট দিতে চান কেবল সেই জায়ার Class এর সাথে ripple-effect অংশটি যুক্ত করে দিলেই হয়ে যাবে।
সাহায্য জিজ্ঞাসাঃ উপরের HTML অংশটি বুঝতে কোন সমস্যা হলে কিংবা আপনার ব্লগের যে অংশে যুক্ত করতে চাচ্ছেন সেই অংশ খোঁজে না পেলে আমাদেরকে কমেন্ট করে জানাতে পারেন। আমরা আপনার সমস্যা সমাধানের চেষ্টা করব, ইনশাআল্লাহ্।
