বন্ধুরা আজকে আমি আপনাদের দারুন কিছু CSS সিএসএস বাটন শেয়ার করবো এটা ২০১৪ নতুন স্টাইল বলতে পারেন । আমিও নিজেই CSS বাটন ব্যবহার করি কিন্তু অনেকেই বলে সেটা নাকি পুরনো হয়েগেছে কিন্তু সেটা আজও আমার কাছে নতুন মনে হয় । যাই হোক আজকে আমি আপনাদের যেটা শেয়ার করতে যাছি সেটা পিয়র সিএসএস । এখুন অনেকের প্রশ্ন এই বাটন গুলো কাজ কি ? তাহলে আমার উত্তর আপনি যখুন ব্লগিং করেন তখুন কোন কোন বিষয়ে নিয়ে পোস্ট করেন এখুন হয় ডেমো দেখাতে হয় বা ডাউনলোড লিঙ্ক শেয়ার করতে হয় ইত্যাদি ইত্যাদি তখুন এই বাটন গুলো খুবি দরকার হয় শুধু পোস্টে কে সুন্দর করার জন্য । কারন এই বাটন গুলো ব্যবহার করলে পোস্ট গুলো খুব সুন্দর দেখাই । যাই হোক আশাকরি বাটন এর কাজ বুজতে পারলেন এবার ব্যবহার শুরু করুন ।
✔ উপরের ফটোতেই দেখে যাছে ডেমো তাই এক্সট্রা কোন ডেমো দিলাম না । এই স্টাইল এর সব থেকে মজার বিষয় এটা সব ধরনের ব্রাউজারে কাজ করবে । তাহলে দেরি না করে আজি ব্যবহার শুরু করুন ।
✔ উপরের ফটোতেই দেখে যাছে ডেমো তাই এক্সট্রা কোন ডেমো দিলাম না । এই স্টাইল এর সব থেকে মজার বিষয় এটা সব ধরনের ব্রাউজারে কাজ করবে । তাহলে দেরি না করে আজি ব্যবহার শুরু করুন ।
১// আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
২// এবার Edit HTML এ ক্লিক করুন তারপর কীবোর্ড থেকে
]]></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);
}
-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>
<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 হিসাবে পোস্ট করে দিন । নীচের চিত্রে দেখুন বিস্তারিত বুজতে পারবেন ।
✔ তাহলে আজকের মতো এই পর্যন্ত আবারও দেখা হবে এই রকম নতুন কিছু নিয়ে । আর হা বন্ধুরা আমার অনুমতি না নিয়ে আমার কোন পোস্ট আপনাদের ব্লগ বা অন্য কোন ব্লগে কপি পেস্ট করবেন না কারন বুজতেই পারছেন কতটা পরিশ্রম করে পোস্ট গুলো করছি ।
✔ পোস্টটি ভালো লাগলে অবশ্যই বন্ধুদের সাথে শেয়ার করুন কমেন্ট করে যানান । আপনার ব্লগিং হোক অনেক অনেক শুভ আশাকরি আপনার অনেক দূর যাবেন সেই আশাকরি । ভালো থাকবেন সুস্থ থাকবেন আল্লাহ্ হাফেজ ।