বোতাম একটি ক্লিকযোগ্য উপাদান যা একটি নির্দিষ্ট ক্রিয়া সম্পাদন করতে ব্যবহৃত হয়। সিএসএস ব্যবহার করে, আপনি বোতামের বিভিন্ন শৈলী সেট করতে পারেন তাদের মধ্যে একটি হল ক্লিকে একটি বোতামের রঙ পরিবর্তন করা। সিএসএস ব্যবহার করে একটি বোতামের রঙ সেট করা যেতে পারে “ : সক্রিয় 'ছদ্ম-শ্রেণী।

এই ব্লগটি আপনাকে ক্লিকে বোতামের রঙ পরিবর্তন করার পদ্ধতি শেখাবে। এর জন্য, প্রথমে :active pseudo-class সম্পর্কে জানুন।

সুতরাং, শুরু করা যাক!

CSS এ ':active' কি?

CSS-এ ক্লিক করলে বোতামের রঙ পরিবর্তন করা সম্ভব “ : সক্রিয় 'ছদ্ম-শ্রেণী। এইচটিএমএল-এ, এটি একটি উপাদান নির্দেশ করে যা সক্রিয় করা হচ্ছে যখন ব্যবহারকারী এটিতে ক্লিক করে। তাছাড়া, মাউস ব্যবহার করার সময়, মাউস কী চাপলে অ্যাক্টিভেশন শুরু হয়।

বাক্য গঠন

' ক ” HTML উপাদানকে বোঝায় যেখানে :active ক্লাস প্রয়োগ করা হবে।

বিবৃত ধারণা বোঝার জন্য একটি উদাহরণের দিকে এগিয়ে যাওয়া যাক।

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

ক্লিকে একটি বোতামের রঙ পরিবর্তন করতে, প্রথমে একটি HTML ফাইলে একটি বোতাম তৈরি করুন এবং ক্লাসের নাম বরাদ্দ করুন “ বিটিএন ”

এইচটিএমএল

এরপর, CSS-এ, বোতামের রঙ সেট করুন। এটি করতে, আমরা ব্যবহার করব ' .btn ' বোতামটি অ্যাক্সেস করতে এবং বোতামের রঙ হিসাবে সেট করতে ' rgb(0, 255, 213) ”

সিএসএস

এর পরে, 'অ্যাক্টিভ সিউডো-ক্লাস' বোতামে প্রয়োগ করুন। .btn: সক্রিয় ' এবং বোতামের রঙ সেট করুন যা সক্রিয় অবস্থায় দেখাবে ' rgb(123, 180, 17) ”:

এটি নিম্নলিখিত ফলাফল দেখাবে:

এখন,

ট্যাগ এবং বোতাম ক্লাসের নামের সাথে শিরোনাম যোগ করা যাক ' বোতাম ”, ট্যাগের ভিতরে।

এইচটিএমএল

< কেন্দ্র >

< h1 > বোতামের রঙ পরিবর্তন করুন < / h1 >

< বোতাম ক্লাস = 'বোতাম' > আমাকে ক্লিক করুন < / বোতাম >

< / কেন্দ্র >

এর পরে, আমরা CSS-এ চলে যাব এবং বোতামটিকে স্টাইল করব এবং এটিতে :active প্রয়োগ করব। এটি করার জন্য, আমরা সীমানা শৈলী হিসাবে সেট করব ' কোনটি 'এবং প্যাডিং দিন' হিসাবে 15px ” এর পরে, বোতাম পাঠ্যের রঙ হিসাবে সেট করুন “ rgb(50, 0, 54) ' এবং এর পটভূমি ' rgb(177, 110, 149) ', এবং এর ব্যাসার্ধ হিসাবে ' 15px ”:

.বোতাম {

সীমান্ত : কোনটি ;

প্যাডিং : 15px ;

রঙ : rgb ( পঞ্চাশ , 0 , 54 ) ;

পেছনের রং : rgb ( 177 , 110 , 149 ) ;

সীমানা-ব্যাসার্ধ : 15px ;

}

এটি নিম্নলিখিত ফলাফল দেখাবে:

এর পরে, আমরা আবেদন করব :অ্যাক্টিভ সিউডো-ক্লাস বোতামে “ বোতাম: সক্রিয় ' এবং একটি বোতামের রঙ ' হিসাবে সেট করুন rgb(200, 255, 0) ”:

.বোতাম : সক্রিয় {

পেছনের রং : rgb ( 200 , 255 , 0 ) ;

}

একবার আপনি উপরের সমস্ত কোড বাস্তবায়ন করলে, HTML ফাইলে যান এবং ফলাফলটি পরীক্ষা করতে এটি চালান:

আউটপুট থেকে, এটি লক্ষ্য করা যায় যখন বোতামটি ক্লিক করা হয় তখন নির্দিষ্ট আরজিবি রঙের কোড অনুসারে এর রঙ পরিবর্তন হয়।

উপসংহার

CSS-এ ক্লিক করে বোতামের রঙ পরিবর্তন করতে, “ : সক্রিয় ছদ্ম-শ্রেণী ব্যবহার করা যেতে পারে। আরও নির্দিষ্টভাবে, এটি সক্রিয় হয়ে গেলে এটি বোতাম উপাদানটিকে উপস্থাপন করতে পারে। এই ক্লাসটি ব্যবহার করে, মাউস ক্লিক করলে আপনি বিভিন্ন বোতামের রঙ সেট করতে পারেন। এই নিবন্ধটি CSS-এ ক্লিক করার জন্য বোতামের রঙ পরিবর্তন করার পদ্ধতি ব্যাখ্যা করেছে।