আমি আজ আপনাদের সাথে শেয়ার করবো অত্যান্ত সুন্দর এবং আকর্ষণীয় দুটি Animated Demo and Download Buttons. সাধারণত এ ধরনের বাটন ব্লগ পোষ্টের বিভিন্ন জায়গায় যখন কোন কিছুর ডাউনলোড লিংক কিংবা ডেমো দেখানোর প্রয়োজন হয়, তখনই এ ধরনের বাটন ব্যবহার করা হয়। এ ধরনের আকর্ষণীয় বাটন ব্লগ পোষ্টে ব্যবহার করার ফলে ব্লগ পোষ্টগুলি আরও আকর্ষণীয় হয়ে উঠে। এ বাটনগুলি আমার নিজস্ব তৈরী নয়। বিভিন্ন ব্লগে প্রায় এই ধরনেরই বাটন দেখতে পাবেন। তবে এটা সত্য যে, আমি এটিকে কাষ্টোমাইজ করে অনেকাংশ পরিবর্তন করেছি, যা বাটনগুলিকে আরও আকর্ষণীয় করেছে।
উপরের চিত্রে বাটনগুলির ডেমো দেখতে পাচ্ছেন যে, বাটনে মাউস ধরার পর Animation এর মাধ্যমে Hover Effect হচ্ছে। বাটনগুলি দেখতে অনেকটা ইমেজ এর মত মনে হলোও এটা সত্য যে, এখানে কোন প্রকার ইমেজ ব্যবহার করা হয়নি। এটি সম্পূর্ণরূপে Css এবং HTML এর মাধ্যমে স্টাইল করা হয়েছে। যার ফলে এটি লোড নিতে বিন্দুমাত্রও সময় নেবে না। লাইভ ডেমো দেখতে চাইলে এখান থেকে দেখে আসতে পারেন -
Live Demo
কিভাবে ব্লগে যুক্ত করবেনঃ
- প্রথমে আপনার ব্লগে লগইন করুন।
- এরপর Template > Edit Html এ ক্লিক করুন।
- তারপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন এবং নিচের লিংকের মাধ্যমে প্রদত্তFont Awesome Icons এর আইকনগুলি </head> এর উপরে পেষ্ট করুন।
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
- আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
- এখন ]]></b:skin> ট্যাগের ঠিক উপরে নিচের Css কোডগুলি পেষ্ট করুন।
#pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
position: relative;
display: inline-block;
height: 30px;
width: 100px;
line-height: 30px;
padding: 0;
border-radius: 5px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}
.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}
.pro-down span.circle, .pro-demo span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 21px;
height: 20px;
width: 20px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}
.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
left: 100%;
margin-left: -25px;
background-color: #fdfdfd;
color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
position: absolute;
left: 40px;
text-align: center;
margin: 0 auto;
font-size: 12px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;}
- তারপর Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।
Demo এবং Download বাটন ব্যবহারঃ
- যখন আপনি বাটনগুলি ব্যবহার করতে চাইবেন, তখনই আপনার ব্লগের কাঙ্খিত পোষ্ট এর HTML Editor এ যাবেন এবং সেখানে নিচের কোডগুলি পেষ্ট করবেন।
<div id="pro-buttons">
<a class="pro-down" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="pro-demo" href="#" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
- উপরের লাল চিহ্নিত # এর স্থলে আপনার কাঙ্খিত Demo এবং Download লিংক দেবেন।
