বন্ধুরা আবার আপনাদের জন্য নিয়ে এলাম দারুন css3 বটন । আপনারা জিনিস টা কি টা বুজতে পারলেন না তো , আমি বুঝিয়ে বলছি । আপনারা দেখেছেন আমি যখুন কোন ওয়েডগেট পোস্ট করে তখুন ডেমো দেখাই সেই সুন্দর ডেমো বটনের মতো ওই রকম না কিন্তু কাজ একি । আশাকরি জিসটা কি তা বুজতে পারলেন । তাহলে দেরি করে লাভ কি এখুনি আপনার বলে যুক্ত করে নিন । কিভাবে যুক্ত করবেন নীচে থেকে দেখে নিন ।
* কি ভাবে যুক্ত করবেন :
১) আপনার ব্লগ লগ অন করুন । তারপর ড্যাশবোর্ড থেকে Template এ ক্লিক করুন ।
২) এবার Edit Html এ ক্লিক করুন ।
৩) Ctrl + f প্রেস করে ]]></b:skin> এই কোড টি সার্চ করুন ।
৪) এবার ]]></b:skin> এর উপরে নীচের কোড টি কপি করে পেস্ট করুন ।
/* Exciting Round Buttons By YOURPCGENIE.NET*/
.excitinground{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.excitinground a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.excitinground a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }
.excitinground a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }
.excitinground a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }
.excitinground a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }
.excitinground a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }
.excitinground a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); } .excitinground a:hover, .excitinground:hover { color: #fff; opacity: .7 }
* এবার যখুনি LIVE DEMO বা DOWNLOAD লিঙ্ক শেয়ার করবেন এই ভাবে করবেন । এর জন্য পোস্ট করার সময় HTML হিসাবে
<span class="excitinground"><a class="red" href="http://www.YOUR-LINK-HERE.com/">YOUR TEXT</a></span>
* এবার Red এর জাইগাই আপনার পছন্দ মতো রঙ এর নাম লিখুন । YOUR-LINK-HERE এর জাইগাই আপনার যে লিঙ্ক দিতে চান তার লিঙ্ক দিন YOUR TEXT HERE এর জাইগাই আপনার পছন্দ মতো লিখ দিয়ে দিন । ব্যাস এবার আপনি পোস্ট করুন দেখুন কি সুন্দর লাগে ।
* তাহলে আজকের মতো এই পর্যন্ত আবার দ্যাখা হবে এই রকম নতুন কিছু নিয়ে । ভাল থাকবেন সুস্থ থাকবেন । আল্লাহ্ হাফেজ ।