CSS বাটন

সিএসএস বাটন শৈলী সেটিং করার কিভাবন শিখুন

মূলধারা বুটন শৈলী

ইনস্ট্যান্স

.button {
  background-color: #4CAF50; /* হলুদ */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

বুটনের রং

এই ব্যবহার করুন: background-color বুটনের পটভূমি রং পরিবর্তন করা:

ইনস্ট্যান্স

.button1 {background-color: #4CAF50;} /* সবুজ */
.button2 {background-color: #008CBA;} /* নীল */
.button3 {background-color: #f44336;} /* লাল */ 
.button4 {background-color: #e7e7e7; color: black;} /* গোলাপী */ 
.button5 {background-color: #555555;} /* কালো */

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

বুটনের মাপ

এই ব্যবহার করুন: font-size বুটনের ফন্ট সাইজ পরিবর্তন করা:

ইনস্ট্যান্স

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

এই ব্যবহার করুন: padding বুটনের অভ্যন্তরীণ সাইজ পরিবর্তন করা:

ইনস্ট্যান্স

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

গোলাকার বুটন

এই ব্যবহার করুন: border-radius বুটনটিতে গোলাকার অক্ষরমূলক বোর্ডার অ্যাডাজেন্ট জোড়া:

ইনস্ট্যান্স

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

রঙযুক্ত হাড় বাটন

এই ব্যবহার করুন: border এই অ্যাট্রিবিউট বাটনের রঙযুক্ত হাড় যোগ করুন:

ইনস্ট্যান্স

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* হলুদ */
}
...

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

হলুদ স্পর্শকারী বাটন


যখন মাউস বাটনের উপর চলে যায়, তখন :hover সিলেক্টর বাটনের শৈলী পরিবর্তন করতে ব্যবহার করা যায়。

টীকা:এই ব্যবহার করুন: transition-duration এই অ্যাট্রিবিউট ব্যবহার করুন "হলুদ" ইফেক্টের গতিকে নির্ধারণ করুন:

ইনস্ট্যান্স

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* হলুদ */
  color: white;
}
...

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

শাড়ু বাটন

এই ব্যবহার করুন: box-shadow এই অ্যাট্রিবিউট বাটনের শাড়ু যোগ করুন:

ইনস্ট্যান্স

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ডিসেবলড বাটন

এই ব্যবহার করুন: opacity অ্যাট্রিবিউট বাটনের স্পষ্টতা যোগ করুন (ডিসেবলড হাউজার করে)。

টীকা:আপনি আরও যোগ করতে পারেন "not-allowed" মানের cursor এই অ্যাট্রিবিউট যখন আপনি বাটনের উপর মাউস লাগান, তখন এই অ্যাট্রিবিউট "no parking sign" (পার্কিং নিষিদ্ধ সূচক) দেখাবে:

ইনস্ট্যান্স

.disabled {
  opacity: ০.৬;
  cursor: not-allowed;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

বাটন প্রস্থ


ডিফল্টে, বাটনের মাপ তার টেক্সট কনটেন্টের মানের উপর নির্ভর করে (কনটেন্টের প্রস্থের মতো)। এই ব্যবহার করুন: প্রস্থ প্রতিটি বাটনের প্রস্থ পরিবর্তন করতে এই অ্যাট্রিবিউট যোগ করুন:

ইনস্ট্যান্স

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

বাটন গ্রুপ

　

বাহিরী মার্জিন মুছে এবং প্রত্যেক বাটনে যোগ করুন float:leftদ্বারা বাটন গ্রুপ তৈরি করুন:}}

ইনস্ট্যান্স

.button {
  float: left;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

প্রতিভাত বাটন গ্রুপ

　

ব্যবহার border প্রতিভাত বাটন গ্রুপ তৈরি করতে এই প্রতিভাত গুড়িকে ব্যবহার করুন:

ইনস্ট্যান্স

.button {
  float: left;
  border: 1px solid green;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ভিক্টিক্যাল বাটন গ্রুপ

ব্যবহার display:block প্রতিস্থাপন float:left বাটনগুলিকে উপর-নীচে গ্রুপ করুন না, বরং পারস্পরিক সাথে করুন:

ইনস্ট্যান্স

.button {
  display: block;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ইমেজের ওপর বাটন

কফি

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

এনিমেটেড বাটন

ইনস্ট্যান্স 1

মাউস হভ করার সময় আরো হভ হভ করানো:

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ইনস্ট্যান্স 2

ক্লিক করার সময় 'প্রেস' ইফেক্ট যোগ করুন:

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ইনস্ট্যান্স 3

মাউস হভ করার সময় হভ হভ করানো:

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

ইনস্ট্যান্স 4

ক্লিক করার সময় 'রেডিয়ার' ইফেক্ট যোগ করুন:

স্বয়ংক্রিয়ভাবে চেষ্টা করুন