বোতাম

রঙিন বোতাম শুধুমাত্র প্রাথমিক কর্মের জন্য ব্যবহার করা উচিত. লিঙ্ক সহ গৌণ ক্রিয়াগুলির জন্য, একটি সাধারণ (সাদা) বোতাম ব্যবহার করুন। ফলস্বরূপ, সমস্ত পূর্বের লাল এবং সবুজ বোতামগুলি অন্যান্য প্রাথমিক ক্রিয়াগুলির মতো নীল রঙে রেন্ডার করা হয়েছে। নিচের যে কোনো স্টাইল <button> , <input type="submit"> এবং আরও অনেক কিছুর সাথেও ব্যবহার করা যেতে পারে।

প্রাথমিক মাধ্যমিক ফ্ল্যাট অক্ষম

<a class="button button-primary" href="#buttons">Primary</a>
<a class="button" href="#buttons">Secondary</a>
<a class="button button-white" href="#buttons">Flat</a>
<a class="button button-disabled" href="#buttons">Disabled</a>

যদি প্রথম বোতামটিতে button-white শ্রেণী থাকে, তবে এর লেবেলের বাম প্রান্তটি উপরে বা নীচে উপাদানগুলির বাম প্রান্তের সাথে সারিবদ্ধ হবে না। আপনি বোতামটিতে একটি button-unindented ক্লাস যোগ করে বাটনটিকে প্রান্তিককরণে টানতে পারেন।

প্রথম বোতামের লেবেল পাঠ্যের এই ব্লকের সাথে বাম-সারিবদ্ধ করে না:

বোতাম এক বোতাম দুই

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

এখন প্রথম বোতামের লেবেল পাঠ্যের এই ব্লকের সাথে বাম-সারিবদ্ধ করে:

বোতাম এক বোতাম দুই

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

লেবেলের আগে একটি আইকন সহ বোতাম

বোতামের লেবেলের আগে একটি আইকন প্রদর্শন করতে, button-with-icon ক্লাসটি বোতামে যোগ করুন এবং এর পাঠ্য বিষয়বস্তুর আগে <span class="material-icons" aria-hidden="true">icon_name</span> যোগ করুন লেবেল, যেখানে icon_name হল একটি মেটেরিয়াল ডিজাইন আইকন ।

প্রাথমিক মাধ্যমিক ফ্ল্যাট 

<a class="button button-with-icon button-primary" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Primary
</a>
<a class="button button-with-icon" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Secondary
</a>
<a class="button button-with-icon button-white" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Flat
</a>

লেবেলের পরে একটি আইকন সহ বোতাম

বোতামের লেবেলের পরে একটি আইকন প্রদর্শন করতে, button-with-icon শ্রেণী যোগ করুন এবং পাঠ্যের পরে <span class="material-icons icon-after" aria-hidden="true">icon_name</span> যোগ করুন লেবেলের বিষয়বস্তু, যেখানে icon_name একটি মেটেরিয়াল ডিজাইন আইকন।

প্রাইমারি সেকেন্ডারি ফ্ল্যাট 

<a class="button button-with-icon button-primary" href="#buttons">
  Primary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon" href="#buttons">
  Secondary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon button-white" href="#buttons">
  Flat<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>