CSS বাটন স্টাইলিং: সম্পূর্ণ গাইড

ওয়েবসাইট ডিজাইন করার সময় আপনাকে প্রায়শই এমন বাটন তৈরি করতে হয় যা দৃষ্টিনন্দন এবং ব্যবহারকারীদের মনোযোগ আকর্ষণ করে। উদাহরণস্বরূপ, আপনি চাইতে পারেন একটি বাটনের পটভূমির রং অন্য পেজ এলিমেন্ট থেকে আলাদা হয় যাতে ব্যবহারকারীর চোখ সেই বাটনে পড়ে।

CSS ব্যবহার করে ডেভেলপাররা স্টাইলিশ বাটন তৈরি করতে পারেন। CSS-এ বাটনের রং, টেক্সট আকার, বর্ডার, প্রস্থ, উচ্চতা এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করা যায়।

এই টিউটোরিয়ালে উদাহরণসহ আলোচনা করা হয়েছে কিভাবে বিভিন্ন CSS প্রপার্টি ব্যবহার করে HTML বাটন স্টাইল করা যায়। এই টিউটোরিয়াল পড়া শেষ করলে আপনি CSS-এ বাটন স্টাইলিং-এ দক্ষ হবেন।

বাটন সংক্ষিপ্ত পরিচয়

HTML-এ বাটন সংজ্ঞায়িত করার একাধিক উপায় রয়েছে। সবচেয়ে সাধারণ দুটি পদ্ধতি হলো <button> ট্যাগ এবং <input type="button"> এলিমেন্ট। এই দুটি পদ্ধতিতে একই ধরনের বাটন তৈরি হয়।

HTML কোড ব্যবহার করে বাটন সংজ্ঞায়িত করা হয়। নিচে কোনো স্টাইল ছাড়া একটি ডিফল্ট HTML বাটন দেখানো হলো:

এই বাটনের জন্য ব্যবহৃত কোড:

<button>Click me</button>

এই বাটন ডিফল্ট HTML স্টাইল ব্যবহার করে, তাই এটি কाफी সাধারণ দেখে।

যদি আমরা আমাদের বাটন স্টাইল করতে চাই—অর্থাৎ পেজে এটি কীভাবে দেখাবে তা কাস্টমাইজ করতে চাই—তবে CSS ব্যবহার করতে হবে। এই আর্টিকেলে আমরা নিচের বিষয়গুলো আলোচনা করব:

• পটভূমির রং পরিবর্তন
• টেক্সট রং পরিবর্তন
• টেক্সট আকার পরিবর্তন
• প্যাডিং যোগ করা
• কোনা গোলাকার করা
• রঙিন বর্ডার যোগ করা
• :hover ফিচার ব্যবহার করা
• শ্যাডো যোগ করা
• প্রস্থ পরিবর্তন করা
• বাটন নিষ্ক্রিয় করা
• বাটন অ্যানিমেট করা

আমরা একসাথে হরিজেন্টাল এবং ভার্টিক্যাল বাটন গ্রুপ তৈরি করার পদ্ধতিও জানব।

পটভূমির রং (Background Color)

বাটন ডিজাইন করার সময় আপনি প্রথমে যা করতে চাইতে পারেন তা হলো বাটনের জন্য একটি পটভূমির রং নির্ধারণ করা। ডিফল্টরূপে বাটনের সাদা পটভূমি এবং কালো টেক্সট থাকে। CSS-র background-color প্রপার্টি ব্যবহার করে বাটনের পটভূমির রং পরিবর্তন করা যায়।

মান লें একটি ওয়েবসাইটের জন্য বাটন ডিজাইন করছেন এবং চাচ্ছেন বাটনের গোলাপি পটভূমি হোক। নিচের CSS কোড ব্যবহার করে বাটনের রং পরিবর্তন করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  width: 100px;
  height: 50px;
  background-color: pink;
}

আমাদের কোড নিচের ফলাফল দেবে:

background-color প্রপার্টি ব্যবহার করে আমরা বাটনের পটভূমির রং গোলাপি করেছি। এই প্রপার্টি দিয়ে যেকোনো রঙে বাটনের পটভূমি রং করা যায়।

টেক্সট রং (Text Color)

বাটনের টেক্সট রং পরিবর্তন করতে color প্রপার্টি ব্যবহার করা হয়। ধরুন, আমরা একটি বাটন ডিজাইন করছি যার গোলাপি পটভূমি এবং সবুজ টেক্সট হবে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  width: 100px;
  height: 50px;
  color: green;
  background-color: pink;
}

আমাদের কোড নিচের ফলাফল দেবে:

এখানে color: green; প্রপার্টি ব্যবহার করে বাটনের টেক্সট রং সবুজ করা হয়েছে।

টেক্সট আকার (Text Size)

বাটনের ভেতরের টেক্সট কত বড় হবে তা নির্ধারণ করতে CSS font-size প্রপার্টি ব্যবহার করা হয়। ধরুন, আমরা টেক্সটের ফন্ট আকার ২০px করতে চাই। নিচের কোড দিয়ে এটি সম্ভব:

index.html
<button class="button">Click me</button>

styles.css
.button {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  font-size: 20px;
}

আমাদের কোড নিচের ফলাফল দেবে:

বাটনের আকার আগের মতোই, কিন্তু এখন এর ভেতরের ফন্ট আকার ২০px। আমরা font-size অ্যাট্রিবিউট ব্যবহার করে বাটনের টেক্সট আকার নির্ধারণ করেছি।

প্যাডিং (Padding)

বাটন ডিজাইন করার সময় আপনি বাটনের টেক্সট এবং বাইরের দেওয়ালের মধ্যে নির্দিষ্ট khoảngশেষ রাখতে চাইতে পারেন। সেটায় padding প্রপার্টি কাজে লাগে।

padding প্রপার্টি দৈর্ঘ্য একক (px, em ইত্যাদি) বা পারসেন্টেজ মান ব্যবহার করে বাটনের টেক্সট এবং বর্ডারের মধ্যে जगह নির্ধারণ করে।

ধরুন, আমাদের পেজে দুটি বাটন তৈরি করব। একটিয় ৪০px প্যাডিং এবং অন্যটিতে ২০px প্যাডিং থাকবে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css
.button1 {
  padding: 20px;
  font-size: 16px;
  background-color: blue;
  color: white;
}
.button2 {
  padding: 40px;
  font-size: 16px;
  background-color: blue;
  color: white;
}

আমাদের কোড নিচের ফলাফল দেবে:

প্রথম বাটনে টেক্সট এবং বর্ডারের মধ্যে ২০px जगह, দ্বিতীয় বাটনে ৪০px जगह রয়েছে। এই বাটনগুলোর জন্য আমরা প্রস্থ বা উচ্চতা নির্দিষ্ট করিনি যাতে প্যাডিং-এর জন্য পর্যাপ্ত জায়গা থাকে। (প্রস্থ ও উচ্চতা সম্পর্কে পরে আলোচনা করা হয়েছে।)

গোলাকার কোণা (Rounded Corners)

ডিফল্টরূপে HTML বাটনগুলির কোণা বর্গাকার হয়। কিন্তু আপনি চাইতে পারেন বাটনের কোণা গোলাকার হোক।

border-radius প্রপার্টি ব্যবহার করে গোলাকার কোণাযুক্ত বর্গাকার বাটন তৈরি করা যায়। নিচে border-radius প্রপার্টি ব্যবহারের তিনটি উদাহরণ দেওয়া হলো। প্রতিটি উদাহরণে ভিন্ন আকারের বর্ডার রেডিয়াস ব্যবহার করা হয়েছে।

index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css
.button1 {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}
.button2 {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  border-radius: 10px;
}
.button3 {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  border-radius: 15px;
}

আমাদের কোড নিচের ফলাফল দেবে:

এই উদাহরণে আমরা তিনটি বাটন তৈরি করেছি। বাটনের বর্ডার রেডিয়াস যত বড় হবে, কোণাগুলো ততই বেশি গোলাকার দেখাবে।

বর্ডার রং (Border Color)

CSS border প্রপার্টি ব্যবহার করে বাটনে কাস্টম রঙিন বর্ডার যোগ করা যায়।

ধরুন, আপনি একটি বাটন তৈরি করতে চান যার রঙিন বর্ডার থাকবে যাতে ব্যবহারকারী সহজে বাটনের সীমানা বুঝতে পারে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1; /* হালকা গোলাপি */
  padding: 25px;
}

আমাদের কোড নিচের ফলাফল দেবে:

এই বাটনের সাদা পটভূমি, কালো কন্টেন্ট এবং সব পাশে ২৫px প্যাডিং রয়েছে। আমরা border প্রপার্টি ব্যবহার করে ৩px প্রস্থের স olid বর্ডার তৈরি করেছি এবং এর রং #ffb6c1 (হেক্সাডেসিম্যাল মান) হিসেবে হালকা গোলাপি নির্ধারণ করেছি।

border প্রপার্টি সম্পর্কে আরও জানতে আমাদের CSS বর্ডার প্রপার্টি সম্পর্কিত আর্টিকেল পড়ুন।

হোভার (Hover)

CSS :hover সিলেক্টর ব্যবহার করে যেই বাটনে ব্যবহারকারী মাউস কার্সর রাখবে, তার স্টাইল পরিবর্তন করা যায়।

ধরুন, আমরা কালো টেক্সট এবং সাদা পটভূমিযুক্ত একটি বাটন ডিজাইন করছি, এবং ব্যবহারকারী যখন এর ওপর মাউস রাখবে তখন টেক্সট রং সাদা এবং পটভূমি রং সবুজ হয়ে যাবে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1;
  padding: 25px;
}
.button:hover {
  background-color: green;
  color: white;
}

আমাদের কোডের ফলাফল:

উপরোক্ত ডায়াগ্রামের প্রথম বাটনটি দেখাচ্ছে কিভাবে বাটনটি দেখাবে যখন ব্যবহারকারী এর ওপর মাউস রাখবে না। এটি সাদা বাটন, কালো টেক্সট, গোলাপি বর্ডার এবং ২৫px প্যাডিংসহ। এটি বাটনের ডিফল্ট অবস্থা। কিন্তু ব্যবহারকারী যখন বাটনের ওপর মাউস রাখবে, পটভূমি রং সবুজ এবং টেক্সট রং সাদা হয়ে যাবে।

ব্যবহারকারীর কার্সর বাটন থেকে সরানোর সাথে সাথে বাটন তার ডিফল্ট অবস্থায় ফিরে যাবে।

আমরা transition-duration অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করতে পারি যে ব্যবহারকারী হোভার করার পর বাটন পরিবর্তন হতে কতক্ষণ লাগবে। যদি আমরা চাই যে উপরের বাটনটি ১ সেকেন্ডে পরিবর্তন হোক (সবুজ পটভূমি এবং সাদা টেক্সট হয়ে যাওয়ায়), তবে নিচের কোড ব্যবহার করতে পারি:

.button {
  ...
  transition-duration: 1s;
}

এখন ব্যবহারকারী হোবার করলে বাটন পরিবর্তন হতে ১ সেকেন্ড লাগবে। CSS ট্রানজিশন সম্পর্কে আরও জানতে আমাদের CSS ট্রানজিশন বिगিনার গাইড পড়ুন।

শ্যাডো (Shadows)

CSS box-shadow প্রপার্টি ব্যবহার করে বাটনে শ্যাডো যোগ করা যায়। box-shadow প্রপার্টি বেশ কিছু প্যারামিটার নেয়। এই প্যারামিটারها সম্পর্কে জানতে আমাদের CSS box-shadow টিউটোরিয়াল পড়ুন।

ধরুন, আমরা একটি বাটন ডিজাইন করছি যাতে ড্রপ শ্যাডো থাকে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1;
  padding: 25px;
  box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

আমাদের কোড নিচের ফলাফল দেবে:

এই উদাহরণে আমরা বাটনে শ্যাডো যোগ করেছি। আমাদের নির্দিষ্ট করা শ্যাডোর প্যারামিটারগুলো নিচে দেওয়া হলো:

• x-offset: ০, অর্থাৎ শ্যাডো বাটনের সরাসরি নিচে দেখাবে।
• y-offset: ১০px, অর্থাৎ শ্যাডো বাটনের নিচে ১০px প্রসারিত হবে।
• blur radius: ১০px, অর্থাৎ শ্যাডোতে ব্লার ইফেক্ট থাকবে।
• spread radius: ০, অর্থাৎ ব্লারের চারপাশে কোনো স্প্রেড নেই।
• শ্যাডোর রং: rgba(0,0,0,0.2), যা হালকা স্লেটি।

উপরোক্ত কোড ফলাফলে বাটন এই সব বৈশিষ্ট্যসহ দেখাচ্ছে।

প্রস্থ (Width)

width প্রপার্টি বাটনের প্রস্থ নির্ধারণ করে। ডিফল্টরূপে বাটনের আকার তার টেক্সট কন্টেন্টের ওপর ভিত্তি করে থাকে, কিন্তু width প্রপার্টি ব্যবহার করে নির্দিষ্ট প্রস্থ নির্ধারণ করা যায়।

নিচে ভিন্ন প্রস্থের তিনটি বাটনের উদাহরণ দেওয়া হলো:

index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css
.button1 {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1;
  padding: 25px;
  width: 250px;
}
.button2 {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1;
  padding: 25px;
  width: 50%;
}
.button3 {
  background-color: white;
  color: black;
  border: 3px solid #ffb6c1;
  padding: 25px;
  width: 100%;
}

আমাদের কোড নিচের ফলাফল দেবে:

এই উদাহরণে আমরা ভিন্ন প্রস্থের তিনটি বাটন তৈরি করেছি।

বাটন নিষ্ক্রিয় করা (Disabling a Button)

বাটন ডিজাইন করার সময় আপনি এটিকে নিষ্ক্রিয় করতে চাইতে পারেন কিন্তু পেজে দৃশ্যমান রাখতে চাইতে পারেন। উদাহরণস্বরূপ, একটি ওয়েব ফর্মের সব ফিল্ড পূরণ করা পর্যন্ত বাটন নিষ্ক্রিয় রাখা যেতে পারে।

opacity এবং cursor প্রপার্টি ব্যবহার করে নিষ্ক্রিয় বাটন তৈরি করা যায়। opacity প্রপার্টি বাটনে পারদর্শিতা যোগ করে, যা এটিকে নিষ্ক্রিয়ের মতো দেখায়। ডিফল্ট opacity ১, অর্থাৎ কোনো পারদর্শিতা নেই। CSS opacity প্রপার্টি সম্পর্কে আরও জানতে আমাদের গাইড পড়ুন।

cursor প্রপার্টির মান not-allowed সেট করলে বাটন নিষ্ক্রিয় হয়। ব্যবহারকারী যখন এই বাটনের ওপর মাউস রাখবে, কার্সর স্টপ সাইন দেখাবে।

নিচে একটি সাধারণ বাটন এবং একটি নিষ্ক্রিয় বাটনের কোড দেওয়া হলো:

index.html
<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css
.button1 {
  background-color: #ffb6c1;
  color: black;
  padding: 25px;
}
.button2 {
  background-color: #ffb6c1;
  color: black;
  padding: 25px;
  border: none;
  opacity: 0.5;
  cursor: not-allowed;
}

আমাদের কোড নিচের ফলাফল দেবে:

দুই বাটনই গোলাপি #ffb6c1 পটভূমির। প্রথম বাটনটি সম্পূর্ণ অপেক (ডিফল্ট), এটি ফাংশনাল। দ্বিতীয় বাটনের opacity 0.5 এবং cursor not-allowed, যা এটিকে বেশি পারদর্শী এবং নন-ফাংশনাল (নিষ্ক্রিয়) বানায়।

বাটন গ্রুপ তৈরি করা (Creating Button Groups)

সাইট ডেভেলপ করার সময় আপনি বাটন গ্রুপ তৈরি করতে চাইতে পারেন। উদাহরণস্বরূপ, একটি ফর্ম ডিজাইন করলে আপনি তিনটি বাটন থাকতে চাইতে পারেন যা ব্যবহারকারীকে ফর্ম সেভ করা, পেছনে যাওয়া, বা ফর্মের পরবর্তী পেজে যাওয়ায় সাহায্য করবে।

হরিজেন্টাল বাটন গ্রুপ (Horizontal Button Group)

বাটনগুলো পাশাপাশি দেখানোর জন্য CSS বাটন গ্রুপ তৈরি করতে হয়। বাটনগুলো বাম দিকে ফ্লোট করিয়ে বাটন গ্রুপ তৈরি করা যায়। CSS float প্রপার্টি সম্পর্কে আরও জানতে আমাদের CSS ফ্লোটিং গাইড পড়ুন। হরিজেন্টাল বাটন গ্রুপের উদাহরণ:

index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css
.button {
  background-color: #ffb6c1;
  color: black;
  padding: 25px;
  border: none;
  float: left;
}

আমাদের কোড নিচের ফলাফল দেবে:

উপরে দেখা যাচ্ছে তিনটি বাটন পাশাপাশি দেখাচ্ছে।

একইভাবে, আমরা CSS border প্রপার্টি নির্দিষ্ট করে প্রতিটি বাটনের আলাদা বর্ডার সহ বাটন গ্রুপ তৈরি করতে পারি। বর্ডারসহ বাটন গ্রুপের কোড:

index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css
.button {
  background-color: #ffb6c1;
  color: black;
  padding: 25px;
  border: 2px solid blue;
  float: left;
}

আমাদের কোড নিচের ফলাফল দেবে:

এখানে আমরা প্রতিটি বাটনের চারপাশে ২px প্রস্থের নীল স olid বর্ডার নির্দিষ্ট করেছি। এটি গ্রুপের প্রতিটি বাটনকে দৃশ্যমানভাবে আলাদা করে।

ভার্টিক্যাল বাটন গ্রুপ (Vertical Button Group)

প্রায়শই বাটন গ্রুপ ডিজাইন করার সময় বাটনগুলো লম্বভাবে দেখাতে হয়। সেটায় CSS display: block প্রপার্টি কাজে লাগে।

নিচে display: block ব্যবহার করে ভার্টিক্যাল বাটন গ্রুপের উদাহরণ দেওয়া হলো:

index.html
<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css
.button {
  background-color: #ffb6c1;
  color: black;
  padding: 25px;
  border: 2px solid blue;
  display: block;
}

আমাদের কোড নিচের ফলাফল দেবে:

ওয়েব ব্রাউজার এই বাটনগুলো গ্রুপ করে লম্বভাবে দেখায়।

বাটন অ্যানিমেট করা (Animating Buttons)

বাটন ডিজাইন করার সময় আপনি এটিকে আরও ইন্টারেক্টিভ बनाने জন্য অ্যানিমেট করতে চাইতে পারেন। নিচে CSS ব্যবহার করে বাটনে অ্যানিমেশন যোগ করার কিছু পদ্ধতি আলোচনা করা হলো।

প্রেসড ইফেক্ট (Pressed Effect)

CSS-এ এমন ইফেক্ট তৈরি করা যায় যাতে ব্যবহারকারী বাটনে ক্লিক করলে তা চাপা হয়েছে মনে হয়।

উদাহরণস্বরূপ, ধরুন আপনি একটি হালকা নীল বাটন তৈরি করছেন যাতে গাড় স্লেটি শ্যাডো থাকে, এবং ব্যবহারকারী ক্লিক করলে ০.৫ সেকেন্ড পর এটা গোলাপি রঙের এবং হালকা স্লেটি শ্যাডোয়ে পরিণত হবে। এটি ব্যবহারকারীকে ফিজিক্যাল বাটন চাপা যাচ্ছে এমন অনুভূতি দেবে। নিচের কোড দিয়ে এটি করা যায়:

index.html
<button class="button">Click me</button>

styles.css
.button {
  padding: 20px;
  font-size: 15px;
  color: white;
  background-color: lightblue;
  border: none;
  transition-duration: 0.5s;
  border-radius: 8px;
  box-shadow: 0 5px gray;
}
.button:active {
  background-color: #ffb6c1;
  box-shadow: 0 5px lightgray;
  transform: translateY(5px);
}

আমাদের কোডের ফলাফল:

বাম পাশে বাটনটি ক্লিক করার আগের অবস্থায় দেখানো হয়েছে—হালকা নীল রং এবং গাড় স্লেটি বক্স শ্যাডো। ডান পাশে ক্লিক করার পর (এবং নির্দিষ্ট ট্রানজিশন ডিউরেশন বিত্তে) বাটনের চেহারা—গোলাপি পটভূমি এবং হালকা স্লেটি বক্স শ্যাডো।

আমাদের কোড ভাঙে দেখা যাক। .button স্টাইলে আমরা:

• বাটনের চারপাশে ২০px প্যাডিং তৈরি করেছি।
• বাটনের টেক্সট ফন্ট আকার ১৫px সেট করেছি।
• বাটনের টেক্সট রং সাদা সেট করেছি।
• বাটনের রং হালকা নীল সেট করেছি।
• ডিফল্ট বর্ডার সরিয়ে দিয়েছি।
• হোভার ট্রানজিশন ডিউরেশন ০.৫ সেকেন্ড সেট করেছি।
• ৮px বর্ডার-রেডিয়াস সেট করেছি, যা বাটনের কোণা গোলাকার করে।
• ৫px দৈর্ঘ্যের স্লেটি বক্স শ্যাডো বাটনের নিচে সেট করেছি।

এগুলো ব্যবহারকারী বাটনের ওপর মাউস না রাখলে বাটনের স্টাইল নির্ধারণ করে। .button:active স্টাইলে আমরা:

• বাটনের পটভূমি রং হালকা গোলাপি সেট করেছি।
• ৫px দৈর্ঘ্যের হালকা স্লেটি শ্যাডো বাটনের নিচে সেট করেছি।
• translateY() ট্রান্সফরমেশন ব্যবহার করেছি যা বাটনকে চাপা হয়েছে বলে মনে করাচ্ছে। এই ট্রানজিশন সম্পর্কে আরও জানতে Career Karma-এর CSS ২D ট্রান্সফর্ম গাইড পড়ুন।

এই স্টাইলগুলো ব্যবহারকারী বাটনের ওপর মাউস রাখলে ট্রিগার হওয়া একটি ইফেক্ট তৈরি করে।

ফেড-ইন ইফেক্ট (Fade-In Effect)

transition এবং opacity প্রপার্টি ব্যবহার করে বাটনে ফেড-ইন ইফেক্ট তৈরি করা যায়। :hover সিলেক্টরের সাথে যৌগ করলে ব্যবহারকারী বাটনের ওপর মাউস রাখলে ফেড-ইন ইফেক্ট এক্টিভেট হয়।

ফেড-ইন বাটন তৈরির কোড:

.button {
  padding: 20px;
  font-size: 15px;
  color: white;
  background-color: lightblue;
  border: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  border-radius: 8px;
  opacity: 0.7;
}
.button:hover {
  opacity: 1;
}

আমাদের কোডের ফলাফল:

বাম পাশে বাটনটি বেশি ট্রান্সপারেন্সি দেখাচ্ছে। এটি opacity প্রপার্টির মান ০.৭ সেট করার ফলাফল।

ব্যবহারকারী বাটনের ওপর মাউস রাখলে .button:hover CSS প্রপার্টির কন্টেন্ট পড়া হয়, যা বাটনের opacity ১ করে দেয়। ফলে বাটন সম্পূর্ণ অপেক (অপারদর্শী) হয়ে যায়।

উপসংহার (Conclusion)

HTML ওয়েব পেজে বাটনের কাঠামো সংজ্ঞায়িত করে। একবার বাটন সংজ্ঞায়িত হলে, আপনি CSS ব্যবহার করে আপনার প্রয়োজন অনুযায়ী এটিকে কাস্টমাইজ করতে পারেন।

এই টিউটোরিয়ালে উদাহরণসহ আলোচনা করা হয়েছে কিভাবে জনপ্রিয় CSS প্রপার্টি ব্যবহার করে বাটন স্টাইল করা যায়। এখন আপনি প্রফেশনাল ওয়েব ডেভেলপারের মতো CSS-এ বাটন স্টাইল করতে পারবেন!