Dec 1, 2016

ব্লগে CSS3 Material Design Buttons যুক্ত করুন (V2)

ওয়েব ডিজাইনের গোড়ার দিকে ওয়েবসাইটে বিভিন্ন ধরনের বাটন যুক্ত করার ক্ষেত্রে Image ব্যবহার করা হত, কিন্তু ওয়েব ডেভেলপমেন্টের উন্নতির সাথে সাথে এখন ডেভেলপাররা Image এর পরিবর্তে বিভিন্ন ধরনের Iconic Font ফন্ট এর মাধ্যমে CSS3 এর সমন্বয়ে বিভিন্ন ধরনের বাটন তৈরি করে ওয়েবসাইটে ব্যবহার করছেন। এতে করে এক দিকে যেমন ওয়েব পেজের Load Time বৃদ্ধি পাচ্ছে অন্যদিকে Customize করার মাধ্যমে যে কোন সময়ে ডিজাইনেরও পরিবর্তন করা সম্ভব হচ্ছে। তাছাড়াও আকর্ষণীয় ডিজাইনের বাটন ব্লগের সুন্দর্য বৃদ্ধি করার পাশাপাশি ভিজটরদের বিভিন্ন লিংকের প্রতি আকৃষ্ট করে ব্লগের Page View বৃদ্ধিতেও অবদান রাখবে।
ব্লগে CSS3 Material Design Buttons যুক্ত করুন (V2)
আমরা ইতোপূর্বে আমাদের ব্লগে এ ধরনের Material Design Animated Buttons নামে আরেকটি পোষ্ট শেয়ার করেছিলাম। সে জন্য বাটনগুলি নতুনভাবে পুনঃ ডিজাইন করাতে এগুলিকে Version-2 হিসেবে নাম দেয়া হয়েছে। আজকের বাটনগুলি আমরা দুটি ডিজাইন করেছি। একটির আইকন বাম পাশে এবং অন্যটির আইকন ডান পাশে থাকবে। যার যার পছন্দ অনুসারে ইচ্ছামত বাটন যুক্ত করে নিতে পারবেন। তাছাড়াও বাটনগুলি CSS3 এবং HTML5 এর সমন্বয়ে তৈরি করাতে যে কোন ধরনের কাষ্টমাইজ করে আপনার মনেরমত করে সাজিয়ে নিতে পারবেন।

সরাসরি দেখুন ডাউনলোড সোর্স

প্রথম ডিজাইনের স্টাইল শীটঃ

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit HTML এ ক্লিক করুন।
ব্লগে CSS3 Material Design Buttons যুক্ত করুন (V2)
  • কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • এখন নিচের Css কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.ripple{text-align:center;display:inline-block;padding:2px 30px 2px 0;border-radius:2px;letter-spacing:.5px;border-radius:2px;text-decoration:none;color:#fff;overflow:hidden;position:relative;z-index:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
.red:before,.pink:before,.blue:before,.cyan:before,.teal:before,.yellow:before,.orange:before,.brown:before,.grey:before,.black:before{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:5px;padding:7px 20px;margin-right:20px}
.red:before{content:"\f06e";background:#D71C0F}
.pink:before{content:"\f019";background:#C31A53}
.blue:before{content:"\f07a";background:#1F84D5}
.cyan:before{content:"\f06e";background:#02A7BC}
.teal:before{content:"\f019";background:#027D71}
.yellow:before{content:"\f07a";color:#000;background:#E7D535}
.orange:before{content:"\f06e";background:#E98C04}
.brown:before{content:"\f019";background:#694A3F}
.grey:before{content:"\f07a";background:#8A8989}
.black:before{content:"\f06e";background:#3B3B3B}

দ্বিতীয় ডিজাইনের স্টাইল শীটঃ

  • উপরের কোডগুলির পরিবর্তে নিচের CSS কোডগুলি ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
.ripple{text-align:center;display:inline-block;padding:2px 0 2px 30px;border-radius:2px;letter-spacing:.5px;border-radius:2px;text-decoration:none;color:#fff;overflow:hidden;position:relative;z-index:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease}
a.ripple{color:#FFF;text-decoration:none;font-family:"Roboto",sans-serif}
a.yellow{color:#000}
.ripple:hover{box-shadow:0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15)}
.red{background-color:#F44336}
.pink{background-color:#E91E63}
.blue{background-color:#2196F3}
.cyan{background-color:#00bcd4}
.teal{background-color:#009688}
.yellow{background-color:#FFEB3B}
.orange{background-color:#FF9800}
.brown{background-color:#795548}
.grey{background-color:#9E9E9E}
.black{background-color:#000000}
.red:after,.pink:after,.blue:after,.cyan:after,.teal:after,.yellow:after,.orange:after,.brown:after,.grey:after,.black:after{color:#FFF;font-size:16px;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:0;padding:7px 20px;margin-left:20px}
.red:after{content:"\f06e";background:#D71C0F}
.pink:after{content:"\f019";background:#C31A53}
.blue:after{content:"\f07a";background:#1F84D5}
.cyan:after{content:"\f06e";background:#02A7BC}
.teal:after{content:"\f019";background:#027D71}
.yellow:after{content:"\f07a";color:#000;background:#E7D535}
.orange:after{content:"\f06e";background:#E98C04}
.brown:after{content:"\f019";background:#694A3F}
.grey:after{content:"\f07a";background:#8A8989}
.black:after{content:"\f06e";background:#3B3B3B}
  • এখন Template Save করে বেরিয়ে আসুন।
  • নোটঃ আপনার ব্লগে যদি Jquery এবং Font Awesome স্টাইলশীট যুক্ত করা না থাকে, তাহলে অবশ্যই দুটি Plugging যুক্ত করে নিতে হবে।

পোষ্টের ভীতরে বাটন যুক্ত করার পদ্ধতীঃ

  • নতুন একটি পোষ্ট তৈরি করুন কিংবা পুরাতন পোষ্ট Edit করুন।
  • তারপর নিচের চিত্রেরমত পোষ্ট সেকশন হতে HTML বাটনটিতে ক্লিক করুন।
ব্লগে CSS3 Material Design Buttons যুক্ত করুন (V2)
  • উপরের চিত্রের লাল চিহ্নিত HTML বাটনটিতে ক্লিক করার পর নিচের চিত্রেরমত আপনার পোষ্টের HTML Editor দেখতে পাবেন।
ব্লগে CSS3 Material Design Buttons যুক্ত করুন (V2)
  • এখন উপরের চিত্রের লাল চিহ্নিত অংশের জায়গায় নিচের কোডগুলি যুক্ত করুন।
<a class="ripple red" href="#">Button</a>
<a class="ripple pink" href="#">Button</a>
<a class="ripple blue" href="#">Button</a>
<a class="ripple cyan" href="#">Button</a>
<a class="ripple teal" href="#">Button</a>
<a class="ripple yellow" href="#">Button</a>
<a class="ripple orange" href="#">Button</a>
<a class="ripple brown" href="#">Button</a>
<a class="ripple grey" href="#">Button</a>
<a class="ripple black" href="#">Button</a>
  • সবশেষে পোষ্টটি Publish করলেই কাজ OK.
  • নোটঃ উপরের প্রত্যেকটি লাইনে একটি করে বাটন রয়েছে। প্রতিটি বাটনের Class তার কালারের নামানুসারে করা হয়েছে, যাতেকরে সবাই সহজে তার পছন্দের বাটনটি নির্বাচন করতে পারে। যখন কোন বাটন যুক্ত করা প্রয়োজন হবে, তখন কেবলমাত্র ঐ লাইনটি যুক্ত করে দিলেই বাটন যুক্ত হয়ে যাবে।

পরিবর্তনঃ

  • উপরের CSS কোডের Grey কালারের অংশগুলি হতে বাটনের রং পরিবর্তন করতে পারবেন।
  • সবুজ কালারের অংশগুলি হচ্ছে Font Awesome আইকন এর Unicode সংখ্যা। এগুলি হতে বাটনের আইকনসহ বাটনের প্রথম অংশে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা যাবে। Font Awesome আইকন এর অফিসিয়ার ওয়েবসাইট হতে খুব সহজে এই Unicode গুলি পেয়ে যাবেন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

4 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: