Ads by Priyotunes- pAds

Download audios, videos and many more

Ads by Priyotunes- pAds

Free Domain

Mohammad Roman

36 টিউন

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

5 মাস, 3 সপ্তাহ, 6 দিন, 3 ঘন্টা, 53 মিনিট আগে :: 26 March, 2017 06:31 AM

...

Sponsored Tunes Ads by Priyotunes- pAds

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

টিউন করেছেন : Mohammad Roman | প্রকাশিত হয়েছে : 5 মাস, 3 সপ্তাহ, 6 দিন, 3 ঘন্টা, 53 মিনিট আগে :: 26 March, 2017 06:31 AM | |

Ads by Priyotunes- pAds

Free Domain
  • ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে পর্ব-[০১] :: ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে[পর্ব 1] যারা ওয়েবসাইট বানাতে পারেন না তাদের জন্য এই টিউন
  • ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে পর্ব-[০২] :: ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে[পর্ব1]ওয়েব মেইল তৈরি করতে চান কিন্তু পারছেন না ? তাহলে এই দিকে আসুন
  • ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে পর্ব-[০৩] :: Blogger নাকি WordPress আপনি কোনটি দিয়ে শুরু করবেন? Blogger এবং WP এর মধ্যের পার্থক্য!!!
  • ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে পর্ব-[০৪] :: ব্লগস্পট ব্লগে যেভাবে টেমপ্লেট ইন্সটল করবেন !!!
  • ওয়েব ডিজাইন শিখুন সম্পুর্ন ফ্রিতে পর্ব-[০৫] :: ওয়েব ডিজাইনাররা কিভাবে ফ্রিলান্সিং শুরু করবেন।


  • ওয়েব ডিজাইনের গোড়ার দিকে ওয়েবসাইটে বিভিন্ন ধরনের বাটন যুক্ত করার ক্ষেত্রে 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 গুলি পেয়ে যাবেন।

    প্রিয় টিউনসে যুক্ত কর

    নির্বাচিতটিউন মনোনয়ন


Leave a Reply

Your email address will not be published. Required fields are marked *