সাধারণত ডাউনলোড বাটন এইচটিএমএল কোডটি বিশ্বের অনেক ব্লগাররা ব্যবহার করে থাকেন। এই বাটনটির সাহায্যে ডাউনলোড লিঙ্ক, ওয়েবলিঙ্ক, পোস্ট লিঙ্ক, ফাইল লিঙ্ক এবং আরও অনেক কিছু তৈরি করতে ব্যবহার করা হয়।
ব্লগারের জন্য ডাউনলোড বাটন HTML কোডের সুবিধা :
১) আর্টিকেল এর যেকোন লিংক সুন্দর দেখাবে।ব্লগারে স্টাইলিশ বাটন তৈরি ও সেট করতে নিচের পদক্ষেপগুলি অনুসরণ করুন।
ধাপ - ১ : প্রথমে ব্লগার অ্যাকাউন্টে চলে যান।কোড : কোডটি কপি করে <head> ট্যাগ এর নিচে পেস্ট করে দিন।
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
ধাপ - ৭ : এখন নিচের 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>
<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>
<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/ এই লিংকটির বদলে আপনি আপনার ডাউনলোড লিঙ্কটি প্রতিস্থাপন করুন।
আশা করি বুজতে পারছেন। এভাবে খুব সহজে আপনি আপনার ব্লগ সাইটের জন্য অ্যানিমেটড বাটন তৈরী ও সেট করে নিতে পারবেন।
-------------------------------------
আজকে এই পর্যন্ত । দেখা হবে পরবর্তীতে অন্য কোনো পোস্টে । সেই পর্যন্ত সুস্থ ও নিরাপদে থাকুন । যদি আমাদের সাইটের পোস্টগুলো আপনার একটু হলেও উপকারে আসে তাহলে বন্ধুদের সাথে শেয়ার করতে ভুলবেন না। আর এই রকম নিত্যনতুন পোস্ট পেতে আমাদের সাথে থাকুন।
[ যুক্ত হতে পারেন আমাদের ফেসবুক ফ্যান পেইজে ]
0 Comments
Your comment helps to inspire and motivate a blogger to write something better, so please don't forget to give your feedback after reading each post.