একটি বোতাম HTML এর একটি মৌলিক অংশ যা বিভিন্ন কাজ সম্পাদন করে। CSS ব্যবহার করে, আপনি বোতামটি ডিজাইন এবং স্টাইল করতে পারেন। বোতামটি ডিজাইন করার বিভিন্ন উপায় রয়েছে, যেমন বোতামটি রঙ করা, আকার পরিবর্তন করা, হোভার করা এবং আরও অনেক কিছু।

এই নিবন্ধে, প্রথমে, আমরা শিখব কিভাবে একটি বোতাম তৈরি করতে হয়, তারপর হোভারে একটি বোতামের রঙ পরিবর্তন করতে হয়।

চল শুরু করি!

সিএসএসে হোভারে বোতামের রঙ কীভাবে পরিবর্তন করবেন?

সিএসএস-এ, ' : ঘোরা ” হোভারে বোতামের রঙ পরিবর্তন করতে ব্যবহৃত হয়। ' : ঘোরা ” হল একটি ছদ্ম-শ্রেণি যা এইচটিএমএল উপাদানগুলির আচরণ পরিবর্তন করার অনুমতি দেয় যখন এটির উপর একটি মাউস থাকে, যেমন লিঙ্ক, বোতাম, চিত্র এবং আরও অনেক কিছু।

এর সিনট্যাক্স : ঘোরা নীচে প্রদান করা হয়.

বাক্য গঠন

উপরে প্রদত্ত সিনট্যাক্সে, “ ক ' HTML উপাদান বোঝায় যেখানে ' : ঘোরা ' প্রয়োগ করা হয়. CSS-এ, আপনি HTML উপাদানগুলির হোভার আচরণ সেট করতে পারেন, যেমন উপাদানের রঙ, আকার এবং প্রস্থ।

ধাপ 1: Div এবং বোতাম তৈরি করুন

HTML-এ, প্রথমে, আমরা একটি div তৈরি করব এবং একটি ট্যাগ ব্যবহার করে

সহ একটি শিরোনাম এবং একটি বোতাম যোগ করব। এখানে, আমরা বোতামটির ক্লাসের নাম বরাদ্দ করব “ বিটিএন ' এবং বোতাম পাঠ্য হিসাবে ' আমার উপর হোভার ”

এইচটিএমএল

উপরে উল্লিখিত কোডের ফলাফল নীচে দেওয়া হল. আপনি দেখতে পারেন যে শিরোনাম এবং বোতাম তৈরি হয়েছে:

এখন, ডিভ এবং বোতাম একে একে স্টাইল করতে CSS এ যান।

ধাপ 2: স্টাইল বোতাম এবং ডিভ

প্রথমে, আমরা 'ব্যবহার করে তৈরি কন্টেইনারটিকে স্টাইল করব' div ” তারপর, আমরা ডিভের উচ্চতা হিসাবে সেট করব ' 250px ' এবং পটভূমির রঙ ' হিসাবে rgb(199, 173, 192) ” আমরা div এর সীমানা সামঞ্জস্য করতে বর্ডার প্রপার্টি ব্যবহার করব, প্রস্থ ' 5px ', স্টাইল হিসাবে ' কঠিন ', এবং রঙ হিসাবে ' rgb(40, 2, 55) ”

সিএসএস

নীচের প্রদত্ত আউটপুট নির্দেশ করে যে যোগ করা শৈলীটি ডিভিতে সফলভাবে প্রয়োগ করা হয়েছে:

পরবর্তী ধাপে, আমরা CSS ব্যবহার করে বোতামটিকে স্টাইল করব।

এখন, আমরা ' ব্যবহার করে বোতামটি স্টাইল করব .btn HTML এ তৈরি বোতামটি অ্যাক্সেস করতে। এর পরে, আমরা 'সেটিং করে বোতামের সীমানা লুকিয়ে রাখব। কোনটি সীমানা সম্পত্তি মান হিসাবে. এর পরে, আমরা ফন্টের আকার সামঞ্জস্য করব ' বড় ' এবং বোতামের প্যাডিং ' 10px ” বোতামের বিষয়বস্তু এবং বোতামের সীমানার মধ্যে স্পেস তৈরি করতে। শেষ পর্যন্ত, আমরা পাঠ্য এবং ব্যাকগ্রাউন্ডের রঙ হিসাবে সেট করব “ rgb(50, 0, 54) ' এবং ' rgb(193, 54, 135) ”:

বোতামটি এখন স্টাইল করা হয়েছে:

আরও, আমরা আবেদন করব ' : ঘোরা হোভারে একটি বোতামের রঙ পরিবর্তন করতে।

ধাপ 3: হোভারে বোতামের রঙ পরিবর্তন করুন

এখন, আমরা ব্যবহার করব ' .btn: হোভার হোভার সিউডো-ক্লাস এলিমেন্টের সাথে বোতামটিকে লিঙ্ক করতে। ফলস্বরূপ, বোতামে হোভার প্রয়োগ করা হবে। এর পরে, আমরা বোতামটির পটভূমির রঙ এবং পাঠ্যের রঙ হিসাবে সেট করব “ rgb(66, 2, 41) ' এবং ' rgb(119, 255, 0) ” এই রঙগুলি বোতামটিতে প্রয়োগ করা হবে যখন এটির উপর একটি মাউস থাকবে:

নীচের প্রদত্ত আউটপুটে, আপনি দেখতে পাচ্ছেন যে, বোতামটির রঙ পরিবর্তন করা হয় যখন এটিতে একটি মাউস ঘোরায়:

এটাই! আমরা CSS ব্যবহার করে হোভারে বোতামের রঙ পরিবর্তন করার পদ্ধতি ব্যাখ্যা করেছি।

উপসংহার

হোভারে একটি বোতামের রঙ পরিবর্তন করতে, ' : ঘোরা ” ছদ্ম-শ্রেণীর উপাদান ব্যবহার করা হয়। এটি করার জন্য, বোতামটিকে :hover এর সাথে লিঙ্ক করুন এবং বোতামের রঙ সেট করুন, যখন আমরা এটিতে হভার করব তখন পরিবর্তন হবে। এই নিবন্ধে, আমরা হোভারে বোতামের রঙ পরিবর্তন করার পদ্ধতি ব্যাখ্যা করেছি এবং এর একটি উদাহরণ প্রদান করেছি।