CSS বাটন ২০১৪ স্টাইল ব্লগার ব্লগের জন্য । পোস্টকে সুন্দর করতে এটা আবশ্যক !!

বন্ধুরা আজকে আমি আপনাদের দারুন কিছু CSS সিএসএস বাটন শেয়ার করবো এটা ২০১৪ নতুন স্টাইল বলতে পারেন । আমিও নিজেই CSS বাটন ব্যবহার করি কিন্তু অনেকেই বলে সেটা নাকি পুরনো হয়েগেছে কিন্তু সেটা আজও আমার কাছে নতুন মনে হয় । যাই হোক আজকে আমি আপনাদের যেটা শেয়ার করতে যাছি সেটা পিয়র সিএসএস । এখুন অনেকের প্রশ্ন এই বাটন গুলো কাজ কি ? তাহলে আমার উত্তর আপনি যখুন ব্লগিং করেন তখুন কোন কোন বিষয়ে নিয়ে পোস্ট করেন এখুন হয় ডেমো দেখাতে হয় বা ডাউনলোড লিঙ্ক শেয়ার করতে হয় ইত্যাদি ইত্যাদি তখুন এই বাটন গুলো খুবি দরকার হয় শুধু পোস্টে কে সুন্দর করার জন্য । কারন এই বাটন গুলো ব্যবহার করলে পোস্ট গুলো খুব সুন্দর দেখাই । যাই হোক আশাকরি বাটন এর কাজ বুজতে পারলেন এবার ব্যবহার শুরু করুন ।

 ✔ উপরের ফটোতেই দেখে যাছে ডেমো তাই এক্সট্রা কোন ডেমো দিলাম না । এই স্টাইল এর সব থেকে মজার বিষয় এটা সব ধরনের ব্রাউজারে কাজ করবে । তাহলে দেরি না করে আজি ব্যবহার শুরু করুন ।

কিভাবে আপনার ব্লগে যুক্ত করবেন নীচের ছোট্ট স্টেপ গুলো দেখুনঃ

১// আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।


২// এবার Edit HTML এ ক্লিক করুন তারপর কীবোর্ড থেকে Ctrl+F প্রেস করে নীচের ট্যাগটি খুজে বের করুন ।

]]></b:skin>

৩// উপরের ট্যাগ এর ঠিক উপরে নীচের CSS কোড গুলো কপি পেস্ট করুন ।

.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #05bc27;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#3094f2;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#3094f2;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#3094f2;
text-align:center;
width:100px;
}
.torrentbutton {
background-color:#3094f2;
text-align:center;
width:100px;
}
.torrentbutton:hover {
background-color:#0f0404;
}
.homebutton:hover {
background-color:#ef1515;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

৪// Save Template ক্লিক করার আগে প্রিভিউ দেখে নিন তারপর সেভ করে বেরিয়ে আসুন ।

কিভাবে এই বাটন গুলো ব্যবহার করবেন নীচের স্টেপ দেখুনঃ

{ Demo Button }

<div style="text-align: center;">
<a class="demobutton button" href="Link Here" rel="nofollow" target="_blank"><span style="display: inline-block;">Live Demo</span></a></div>

{ Download Button }

<a class="downloadbutton button" href="Link Here" rel="nofollow" target="_blank"><span style="display: inline-block;">Download</span></a></div> <div style="text-align: center;"><br>

{ Homepage Button } 

<a class="homebutton button" href="Link Here" rel="nofollow" target="_blank"><span style="display: inline-block;">Homepage</span></a></div><br>

{ Torrent Button } 

<a class="pushbutton button" href="Link Here" rel="nofollow" target="_blank"><span style="display: inline-block;">Push Me</span></a></div>

উপরের হাইলাইট কালার লিখে মুছে সেখানে আপনার লিখে দিন শুধু লিঙ্ক পরিবর্তন করবেন

✔ উপরের কোড গুলো যক্ষুনি আপনি পোস্ট করবেন তখুন HTML হিসাবে পোস্ট করে দিন । নীচের চিত্রে দেখুন বিস্তারিত বুজতে পারবেন ।

আপনি এই CSS বাটন যুক্ত করতে সফল হয়েছেন । কোন সমস্যা হলে যানাবেন !

✔ তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে এই রকম নতুন কিছু নিয়ে । আর হা বন্ধুরা আমার অনুমতি না নিয়ে আমার কোন পোস্ট আপনাদের ব্লগ বা অন্য কোন ব্লগে কপি পেস্ট করবেন না কারন বুজতেই পারছেন কতটা পরিশ্রম করে পোস্ট গুলো করছি ।


✔ পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন কমেন্ট করে যানান । আপনার ব্লগিং হোক অনেক অনেক শুভ আশাকরি আপনার অনেক দূর যাবেন সেই আশাকরি । ভালো থাকবেন সুস্থ থাকবেন আল্লাহ্‌ হাফেজ ।