Stylish Slider অ্যানিমেটেড ডাউনলোড বাটনের HTML কোড

আজকে আমি স্টাইলিশ স্লাইডার ডাউনলোড বাটন এর HTML কোড শেয়ার করব। বিশেষ করে যারা ব্লগার সাইটে কাজ করেন তাদের জন্য এই বাটনটি খুবই গুরুত্বপূর্ণ। ব্লগের আর্টিকেল উন্নত করতে এই বাটনগুলা বিশেষ ভূমিকা পালন করবে। এই স্ক্রিপ্টটি শুধুমাত্র ব্লগ সাইটের জন্য উপযুক্ত, ওয়ার্ডপ্রেস সাইটগুলিতে সঠিকভাবে কাজ করে না। অতএব, ওয়ার্ডপ্রেস সাইটের মালিকের এই স্ক্রিপ্ট ব্যবহার করা উচিত নয়।

ব্লগারের জন্য ডাউনলোড বাটন HTML কোড :

সাধারণত ডাউনলোড বাটন এইচটিএমএল কোডটি বিশ্বের অনেক ব্লগাররা ব্যবহার করে থাকেন। এই বাটনটির সাহায্যে ডাউনলোড লিঙ্ক, ওয়েবলিঙ্ক, পোস্ট লিঙ্ক, ফাইল লিঙ্ক এবং আরও অনেক কিছু তৈরি করতে ব্যবহার করা হয়।

ব্লগারের জন্য ডাউনলোড বাটন HTML কোডের সুবিধা :

১) আর্টিকেল এর যেকোন লিংক সুন্দর দেখাবে।

২) লিঙ্ক সনাক্ত করা সহজ হবে।

৩) ব্যবহারকারীকে একটি ভাল অভিজ্ঞতা দিবে।

অ্যানিমেটেড বাটন কি :

অ্যানিমেটেড বাটনগুলি সিএসএস, এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোডিং ভাষা দ্বারা ডিজাইন করা হয়। অ্যানিমেটেড বাটনটি একটি ব্লগ সাইটের সবচেয়ে পেশাদার চেহারা দেয় এবং CSS অ্যানিমেটেড বাটনটি স্বাভাবিক বাটনের চেয়ে দ্রুত লোড হয়।

ব্লগারে স্টাইলিশ বাটন তৈরি ও সেট করতে নিচের পদক্ষেপগুলি অনুসরণ করুন।

ধাপ - ১ : প্রথমে ব্লগার অ্যাকাউন্টে চলে যান।

ধাপ - ২ : অ্যাকাউন্টে গিয়ে থিম সিলেক্ট করুন।

ধাপ - ৩ : এডিট HTML অপশনে ক্লিক করুন।

ধাপ - ৪ : Ctrl+F বাটন ক্লিক করে <head> ট্যাগ খুঁজুন।

ধাপ - ৫ : এখন নিচের কোডটি কপি করে <head> ট্যাগ এর নিচে পেস্ট করে দিন।

কোড : কোডটি কপি করে <head> ট্যাগ এর নিচে পেস্ট করে দিন।

Copy Now

 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>

ধাপ - ৬ : এখন আবার Ctrl+F বাটন ক্লিক করে ]]></b:skin> ট্যাগ খুঁজুন।

ধাপ - ৭ : এখন নিচের CSS স্ক্রিপ্টটি কপি করে ]]]></b:skin> ট্যাগের উপর পেস্ট করুন

Copy Now

#wrap { margin: 20px auto; text-align: center; } 
.pixabin-btn-slide, 
.pixabin-btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #ooo000; border: 2px solid #ff0000; margin: 10px; transition: .5s; } 
.pixabin-btn-slide2 { border: 2px solid #0000ff; } .pixabin-btn-slide:hover { background-color: #ff0000; } .pixabin-btn-slide2:hover { background-color: #0000ff; } 
.pixabin-btn-slide:hover span.circle, .pixabin-btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #ff0000; } .pixabin-btn-slide2:hover span.circle2 { color: #0000ff; } 
.pixabin-btn-slide:hover span.title, .pixabin-btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .pixabin-btn-slide:hover span.title-hover, .pixabin-btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } 
.pixabin-btn-slide span.circle, 
.pixabin-btn-slide2 span.circle2 { display: block; background-color: #ff0000; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } 
.pixabin-btn-slide2 span.circle2 { background-color: #0000ff; } .pixabin-btn-slide span.title, .pixabin-btn-slide span.title-hover, 
.pixabin-btn-slide2 span.title2, 
.pixabin-btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #0000ff; transition: .5s; } .pixabin-btn-slide2 span.title2, 
.pixabin-btn-slide2 span.title-hover2 { color: #0000ff; left: 80px; } .pixabin-btn-slide span.title-hover, .pixabin-btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } 
.pixabin-btn-slide span.title-hover, .pixabin-btn-slide2 span.title-hover2 { color: #fff; }

ধাপ - ৮ : কাজ শেষ হয়ে গেলে save করে নিন।

ধাপ - ৯ : এখন আর্টিকেল বা পেজ এর যেখানে বাটনটি সেট করতে চান সেখানে নিচের কোডগুলা কপি করে পেস্ট করে দিন।

নিচে দুটি ভিন্ন ডিজাইনের বাটন রয়েছে এবং আপনি আপনার পছন্দনুযায়ী যেকোন কোড ব্যবহার করতে পারেন।

Button Style 1

 <div id="wrap"><a class="pixabin-btn-slide" href="https://www.tokiunlimited.com/">
  <span class="circle">
<i class="fa fa-rocket">
</i></span>  
<span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a></div>

Button Style 2

<div id="wrap">
<a class="pixabin-btn-slide2" href="https://www.tokiunlimited.com/">
<span class="circle2"><i class="fa fa-download">
</i></span>
<span class="title2">Download</span><span class="title-hover2">Click here</span>
</a></div>

বাটন ১ ও বাটন ২ এর যা পরিবর্তন করবেন :

১) আপনি CSS সম্পাদনার মাধ্যমে বাটনের রঙ পরিবর্তন করতে পারবেন।

২) https://www.tokiunlimited.com/ এই লিংকটির বদলে আপনি আপনার ডাউনলোড লিঙ্কটি প্রতিস্থাপন করুন।

আশা করি বুজতে পারছেন। এভাবে খুব সহজে আপনি আপনার ব্লগ সাইটের জন্য অ্যানিমেটড বাটন তৈরী ও সেট করে নিতে পারবেন।