CSS বোতাম

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

CSS ব্যবহার করে, বিকাশকারীরা স্টাইল করা বোতাম তৈরি করতে পারে। CSS আপনাকে অন্যান্য জিনিসগুলির মধ্যে একটি বোতামের রঙ, পাঠ্যের আকার, সীমানা, প্রস্থ এবং উচ্চতা পরিবর্তন করতে দেয়।

এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, কিভাবে একটি এইচটিএমএল বোতাম স্টাইল করার জন্য অনেকগুলি CSS বৈশিষ্ট্য ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS ব্যবহার করে বোতাম স্টাইল করার বিষয়ে একজন বিশেষজ্ঞ হয়ে উঠবেন।

বোতামগুলির ওভারভিউ

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

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

এই বোতামটির জন্য আমরা যে কোডটি ব্যবহার করেছি তা হল:

<button>Click me</button>


এই বোতামটি ডিফল্ট এইচটিএমএল শৈলী ব্যবহার করে, যার মানে এই মুহূর্তে বোতামটি বরং সরল দেখাচ্ছে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

আমরা যদি আমাদের বোতামটিকে স্টাইল করতে চাই-অন্য কথায়, পৃষ্ঠায় এটি কেমন দেখাচ্ছে তা কাস্টমাইজ করতে-আমাদের CSS ব্যবহার করতে হবে। এই নিবন্ধে, আমরা আলোচনা করব কিভাবে একটি বোতামে নিম্নলিখিত কাজগুলি করতে হয়:

• পটভূমির রঙ পরিবর্তন করুন।
• পাঠ্যের রঙ পরিবর্তন করুন।
• পাঠ্যের আকার পরিবর্তন করুন।
• প্যাডিং যোগ করুন।
• কোণে বৃত্তাকার।
• একটি রঙিন সীমানা যোগ করুন।
• :hover বৈশিষ্ট্যটি ব্যবহার করুন।
• একটি ছায়া যোগ করুন।
• প্রস্থ পরিবর্তন করুন।
• এটি নিষ্ক্রিয় করুন৷
৷
• এটি অ্যানিমেট করুন।

আমরা কীভাবে অনুভূমিক এবং উল্লম্ব বোতাম গ্রুপ তৈরি করতে হয় তা নিয়েও আলোচনা করব।

পটভূমির রঙ

আপনি যখন একটি বোতাম ডিজাইন করছেন, তখন আপনি প্রথমে যা করতে চাইতে পারেন তা হল বোতামটির জন্য একটি পটভূমির রঙ সেট করা। ডিফল্টরূপে, একটি বোতামে একটি সাদা পটভূমি এবং কালো পাঠ্য থাকে। CSS ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করে আমরা একটি বোতামের পটভূমির রঙ পরিবর্তন করতে পারি।

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

index.htmlআমাকে ক্লিক করুনstyles.css.button { প্রস্থ:100px; উচ্চতা:50px; ব্যাকগ্রাউন্ড-রং:গোলাপী; }

আমাদের কোড ফিরে আসে:

ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করে, আমরা আমাদের বোতামের ব্যাকগ্রাউন্ড কালার পরিবর্তন করে গোলাপী করেছি। আমরা এই প্রপার্টি ব্যবহার করে আমাদের বোতামের পটভূমির রঙ যে কোনো রঙে পরিবর্তন করতে পারি।

পাঠ্য রঙ

একটি বোতামের পাঠ্য রঙ পরিবর্তন করতে, আপনি রঙ বৈশিষ্ট্য ব্যবহার করতে পারেন। ধরুন আমরা একটি বোতাম ডিজাইন করছি এবং আমরা চাই যে বোতামটিতে একটি গোলাপী ব্যাকগ্রাউন্ড এবং সবুজ টেক্সট থাকুক। আমরা নিম্নলিখিত কোড ব্যবহার করে এই বোতামটি তৈরি করতে পারি:

index.htmlআমাকে ক্লিক করুনstyles.css.button { প্রস্থ:100px; উচ্চতা:50px; রঙ:সবুজ; পটভূমি-রঙ:গোলাপী; }

আমাদের কোড ফিরে আসে:

আমাদের কোডে, আমরা রঙ ব্যবহার করি:সবুজ; আমাদের বোতামের পাঠ্যের রঙ সবুজে সেট করার বৈশিষ্ট্য।

পাঠ্যের আকার

একটি বোতামের ভিতরে পাঠ্য কত বড় হবে তা নির্ধারণ করতে আপনি CSS ফন্ট-আকারের বৈশিষ্ট্য ব্যবহার করতে পারেন। ধরুন আমরা চাই টেক্সটের ফন্ট সাইজ 20px হোক। আমরা নিম্নলিখিত কোড ব্যবহার করে এটি ঘটতে পারি:

index.htmlআমাকে ক্লিক করুনstyles.css.button { প্রস্থ:100px; উচ্চতা:50px; ব্যাকগ্রাউন্ড-রঙ:নীল; রঙ:সাদা;ফন্ট-সাইজ:20px;}

আমাদের কোড ফিরে আসে:

আমাদের বোতামটি আগের মতই সাইজ, কিন্তু এখন এর ভিতরের ফন্টের সাইজ 20px। আমরা আমাদের বোতামে পাঠ্যের আকার সেট করতে ফন্ট-সাইজ অ্যাট্রিবিউট ব্যবহার করেছি।

প্যাডিং

একটি বোতাম ডিজাইন করার সময়, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একটি বোতামের ভিতরের পাঠ্য এবং বোতামের বাইরের দেয়ালের মধ্যে একটি নির্দিষ্ট পরিমাণ স্থান চান৷ সেখানেই প্যাডিং সম্পত্তি আসে।

প্যাডিং বৈশিষ্ট্য একটি বোতামের পাঠ্য এবং এর সীমানাগুলির মধ্যে একটি নির্দিষ্ট পরিমাণ স্থান নির্ধারণ করতে দৈর্ঘ্য নির্দেশক (px, em, এবং তাই) বা শতাংশের মান ব্যবহার করে।

ধরুন আমরা আমাদের পেজে দুটি বোতাম তৈরি করতে চাই। একটি বোতামে 40px প্যাডিং থাকা উচিত এবং অন্যটিতে 20px প্যাডিং থাকা উচিত৷ আমরা নিম্নলিখিত কোড ব্যবহার করে এই বোতামগুলি তৈরি করতে পারি:

index.htmlআমাকে ক্লিক করুনআমাকে ক্লিক করুনstyles.css.button1 { প্যাডিং:20px; ফন্ট-আকার:16px; ব্যাকগ্রাউন্ড-রঙ:নীল; রঙ:সাদা;}. বোতাম2 { প্যাডিং:40px; ফন্ট-আকার:16px; ব্যাকগ্রাউন্ড-রঙ:নীল; রঙ:সাদা;

আমাদের কোড ফিরে আসে:

আমাদের প্রথম বোতামটিতে বোতামের ভিতরের পাঠ্য এবং বোতামের সীমানার মধ্যে একটি 20px সীমানা রয়েছে। আমাদের দ্বিতীয় বোতামটিতে বোতামের পাঠ্য এবং সীমানার মধ্যে একটি 40px সীমানা রয়েছে। এই বোতামগুলির জন্য, এই প্যাডিংয়ের জন্য পর্যাপ্ত স্থান রয়েছে তা নিশ্চিত করার জন্য, আমরা প্রস্থ বা উচ্চতার বৈশিষ্ট্যগুলি নির্দিষ্ট করি না। (আমরা নীচে এই বৈশিষ্ট্যগুলি নিয়ে আলোচনা করব।)

গোলাকার কোণ

ডিফল্টরূপে, HTML-এর বোতামগুলির বর্গাকার প্রান্ত থাকে। যাইহোক, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি আপনার বোতামগুলিকে বৃত্তাকার কোণে রাখতে চান।

আপনি বৃত্তাকার কোণ সহ আয়তক্ষেত্রাকার বোতাম তৈরি করতে সীমানা-ব্যাসার্ধ বৈশিষ্ট্য ব্যবহার করতে পারেন। নীচে সীমানা-ব্যাসার্ধ সম্পত্তি ব্যবহার করে কোডের তিনটি উদাহরণ রয়েছে। বিভিন্ন ব্যাসার্ধের আকারের প্রভাব বোঝাতে, প্রতিটি উদাহরণ একটি ভিন্ন আকারের সীমানা ব্যাসার্ধ ব্যবহার করে।

আমাদের কোড ফিরে আসে:

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

সীমানার রঙ

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

ধরুন আপনি একটি রঙিন সীমানা সহ একটি বোতাম তৈরি করতে চান যাতে বোতামের সীমানা ব্যবহারকারীর কাছে পরিষ্কার হয়। আপনি নিম্নলিখিত কোড ব্যবহার করে এই ধরনের একটি বোতাম তৈরি করতে পারেন:

index.htmlআমাকে ক্লিক করুনstyles.css.button { background-color:white; রঙ কালো; সীমানা:3px কঠিন #ffb6c1; // হালকা গোলাপী প্যাডিং:25px;}

আমাদের কোড ফিরে আসে:

আমাদের বোতামটির একটি সাদা ব্যাকগ্রাউন্ড রয়েছে, এর বিষয়বস্তু কালো, এবং এটির সমস্ত প্রান্তে একটি 25px প্যাডিং রয়েছে৷ আমরা আমাদের বোতামের চারপাশে একটি 3px-প্রশস্ত কঠিন সীমানা তৈরি করতে সীমানা সম্পত্তি ব্যবহার করেছি এবং আমরা আমাদের সীমানার রঙ #ffb6c1 এ সেট করেছি, যা হালকা গোলাপী রঙের হেক্সাডেসিমেল মান।

আপনি যদি বর্ডার প্রপার্টি সম্পর্কে আরও জানতে চান, তাহলে CSS বর্ডার প্রপার্টি সম্পর্কে আমাদের নিবন্ধটি পড়ুন।

হোভার করুন

আপনি CSS :hover নির্বাচক ব্যবহার করতে পারেন একটি ওয়েব পৃষ্ঠাকে নির্দেশ করতে একটি বোতামের শৈলী পরিবর্তন করতে যখন একজন ব্যবহারকারী তাদের কার্সার দিয়ে বোতামের উপর ঘোরায়।

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

index.htmlআমাকে ক্লিক করুনstyles.css.button { background-color:white; রঙ কালো; সীমানা:3px কঠিন #ffb6c1; প্যাডিং:25px;}. বোতাম:হোভার {পটভূমির রঙ:সবুজ; রঙ:সাদা;

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

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

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

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

.বোতাম { … ট্রানজিশন-সময়কাল:1s;}

এখন ব্যবহারকারী যখন বোতামের উপর ঘোরায়, তখন বোতামটি পরিবর্তন হতে এক সেকেন্ড সময় লাগবে। আপনি CSS ট্রানজিশন সম্পর্কে আমাদের শিক্ষানবিস নির্দেশিকা থেকে CSS ট্রানজিশন সম্পর্কে আরও জানতে পারেন।

ছায়া

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

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

index.htmlআমাকে ক্লিক করুনstyles.css.button { background-color:white; রঙ কালো; সীমানা:3px কঠিন #ffb6c1; প্যাডিং:25px; বক্স-ছায়া:0 10px 10px 0 rgba(0,0,0,0.2);}

আমাদের কোড ফিরে আসে:

এই উদাহরণে, আমরা আমাদের বোতামে একটি ছায়া যোগ করেছি। আমাদের ছায়ার জন্য আমরা যে পরামিতিগুলি নির্দিষ্ট করেছি তা নিম্নরূপ:

• এক্স-অফসেট হল 0, যার অর্থ হল আমাদের ছায়া সরাসরি আমাদের বোতামের নীচে প্রদর্শিত হবে৷
৷
• y-অফসেট হল 10px, যার মানে আমাদের ছায়া আমাদের বোতামের নিচে 10px দ্বারা প্রসারিত।
• ব্লার ব্যাসার্ধ 10px, যার মানে আমাদের ছায়ার একটি অস্পষ্ট প্রভাব রয়েছে৷
• আমাদের বোতামের ছায়ার জন্য স্প্রেড ব্যাসার্ধ হল 0, তাই ব্লারের চারপাশে কোন স্প্রেড নেই।
• আমাদের ছায়ার রঙ হল rgba(0,0,0,0.2), যা হালকা ধূসর।

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

প্রস্থ

প্রস্থ বৈশিষ্ট্য একটি বোতামের প্রস্থ নির্ধারণ করতে পারে। ডিফল্টরূপে, একটি বোতামের আকার তার পাঠ্য বিষয়বস্তুর উপর ভিত্তি করে, তবে আপনি প্রস্থ বৈশিষ্ট্যটি ডিফল্টটিকে ওভাররাইড করতে এবং একটি নির্দিষ্ট প্রস্থ সেট করতে ব্যবহার করতে পারেন।

এখানে বিভিন্ন প্রস্থ সহ তিনটি বোতামের একটি উদাহরণ রয়েছে:

আমাদের কোড ফিরে আসে:

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

একটি বোতাম নিষ্ক্রিয় করা

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

অস্বচ্ছতা এবং কার্সার বৈশিষ্ট্য ব্যবহার করে, আপনি একটি অক্ষম বোতাম তৈরি করতে পারেন। অপাসিটি বৈশিষ্ট্য একটি বোতামে স্বচ্ছতা যোগ করে। এটি এটিকে অক্ষম বলে মনে করে। ডিফল্ট অপাসিটি হল 1, যা স্বচ্ছতা ছাড়াই একটি রঙ প্রদর্শন করে। আপনি আমাদের সিএসএস অপাসিটির নির্দেশিকা থেকে সিএসএস অপাসিটি বৈশিষ্ট্য সম্পর্কে আরও জানতে পারেন।

কার্সার প্রপার্টি, যখন "অনুমোদিত নয়" মান নির্ধারণ করা হয়, তখন বোতামটি নিষ্ক্রিয় করে। যখন ব্যবহারকারী একটি বোতামের উপর ঘোরায় যাতে এই মানটি নির্ধারিত হয়, কার্সারটি একটি স্টপ সাইন দেখাবে।

এখানে HTML-এ একটি সাধারণ বোতামের কোড এবং একটি অক্ষম বোতামের জন্য কোডটি অনুসরণ করা হয়েছে:

index.htmlআমাকে ক্লিক করুনআমাকে ক্লিক করুনstyles.css.button1 { background-color:#ffb6c1; রঙ কালো; প্যাডিং:25px;}. বোতাম2 { ব্যাকগ্রাউন্ড-রঙ:#ffb6c1; রঙ কালো; প্যাডিং:25px; সীমানা:কোনোটিই নয়; অস্বচ্ছতা:0.5; কার্সার:অনুমোদিত নয়;

আমাদের কোড ফিরে আসে:

উভয় বোতামেই গোলাপী #ffb6c1 আছে ব্যাকগ্রাউন্ড প্রথম বোতামের পটভূমি সম্পূর্ণ অস্বচ্ছ, যা ডিফল্ট; এই বোতামটি কার্যকরী (যা ডিফল্ট)। দ্বিতীয় বোতামটিতে অপাসিটি প্রপার্টি 0.5 সেট করা আছে এবং কার্সার সম্পত্তির মান not-allowed এ সেট করা হয়েছে . এটি একটি আরও স্বচ্ছ, অকার্যকর (অক্ষম) বোতাম তৈরি করে।

বোতাম গ্রুপ তৈরি করা

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

অনুভূমিক বোতাম গ্রুপ

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

index.htmlআমাকে ক্লিক করুনআমাকে ক্লিক করুনআমাকে ক্লিক করুনশৈলী css.button {পটভূমির রঙ:#ffb6c1; রঙ কালো; প্যাডিং:25px; সীমানা:কোনোটিই নয়; float:left;}

আমাদের কোড ফিরে আসে:

আপনি দেখতে পাচ্ছেন, আমরা তিনটি বোতাম তৈরি করেছি। এগুলো পাশাপাশি দেখা যাচ্ছে।

একইভাবে, আমরা একটি বর্ডার CSS প্রপার্টি নির্দিষ্ট করে বোতামের একটি গ্রুপ তৈরি করতে পারি যার প্রতিটির নিজস্ব সীমানা রয়েছে। সীমানা সহ একটি বোতাম গ্রুপ তৈরি করতে আমরা যে কোডটি ব্যবহার করতে পারি তা এখানে:

index.htmlআমাকে ক্লিক করুনআমাকে ক্লিক করুনআমাকে ক্লিক করুনশৈলী css.button {পটভূমির রঙ:#ffb6c1; রঙ কালো; প্যাডিং:25px; সীমানা:2px কঠিন নীল; float:left;}

আমাদের কোড ফিরে আসে:

আমাদের কোডে, আমরা আমাদের প্রতিটি বোতামের চারপাশে একটি 2px কঠিন নীল সীমানা নির্দিষ্ট করেছি। এটি আমাদের গ্রুপের প্রতিটি বোতামকে দৃশ্যমানভাবে আলাদা করতে দেয়।

উল্লম্ব বোতাম গ্রুপ

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

এখানে একটি উদাহরণ রয়েছে যা একটি CSS বোতাম গ্রুপে উল্লম্বভাবে বোতামগুলি প্রদর্শন করতে display:block ব্যবহার করে:

index.htmlআমাকে ক্লিক করুনআমাকে ক্লিক করুনআমাকে ক্লিক করুনশৈলী css.button {পটভূমির রঙ:#ffb6c1; রঙ কালো; প্যাডিং:25px; সীমানা:2px কঠিন নীল; প্রদর্শন:ব্লক; }

আমাদের কোড ফিরে আসে:

আমাদের ওয়েব ব্রাউজার এই বোতামগুলিকে একত্রিত করে এবং উল্লম্বভাবে প্রদর্শন করে।

অ্যানিমেশন বোতাম

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

চাপা

CSS-এ, আপনি এমন একটি প্রভাব তৈরি করতে পারেন যা ব্যবহারকারী এটিতে ক্লিক করলে এটি একটি বোতাম চাপার মতো দেখায়।

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

index.htmlআমাকে ক্লিক করুনstyles.css.button { প্যাডিং:20px; ফন্ট-আকার:15px; সাদা রং; পটভূমির রঙ:হালকা নীল; সীমানা:কোনোটিই নয়; ট্রানজিশন-সময়কাল:0.5 সেকেন্ড; সীমানা-ব্যাসার্ধ:8px; বক্স-ছায়া:0 5px ধূসর;}. বোতাম:সক্রিয় { ব্যাকগ্রাউন্ড-রঙ:#ffb6c1; বক্স-ছায়া:0 5px হালকা ধূসর; রূপান্তর:translateY(5px);}

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

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

আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের বোতাম শৈলীতে, আমরা:

• আমাদের বোতামের চারপাশে একটি 20px প্যাডিং তৈরি করুন।
• আমাদের বোতামের পাঠ্যের ফন্টের আকার 15px এ সেট করুন।
• আমাদের বোতামের পাঠ্যের রঙ সাদাতে সেট করুন।
• আমাদের বোতামের রঙ হালকা নীলে সেট করুন।
• আমাদের বোতামের চারপাশে ডিফল্ট সীমানা সরানো হয়েছে৷
৷
• আমাদের হোভার ট্রানজিশনের সময়কাল 0.5 সেকেন্ডে সেট করুন।
• 8px এর একটি সীমানা-ব্যাসার্ধ সেট করুন, যা আমাদের বোতামের জন্য বৃত্তাকার কোণ তৈরি করে
• একটি ধূসর বক্সের ছায়া সেট করুন যা 5px লম্বা এবং আমাদের বোতামের নীচে প্রদর্শিত হয়৷

এটি আমাদের বোতামের জন্য শৈলী সেট করে যখন ব্যবহারকারী তাদের কার্সার দিয়ে বোতামের উপর ঘোরায় না। আমাদের .button:active স্টাইলে, আমরা:

• বোতামের পটভূমির রঙ হালকা গোলাপীতে সেট করুন।
• একটি হালকা ধূসর ছায়া সেট করুন যা 5px লম্বা এবং আমাদের বোতামের নীচে প্রদর্শিত হয়৷
• একটি translateY() রূপান্তর সেট করুন যা আমাদের বোতাম টিপে দেখায়। আপনি ক্যারিয়ার কর্ম CSS 2D রূপান্তর নির্দেশিকা থেকে এই পরিবর্তন সম্পর্কে আরও জানতে পারেন৷

এই শৈলীগুলি আমাদের একটি প্রভাব তৈরি করতে দেয় যা ব্যবহারকারী যখন বোতামের উপর ঘোরায় তখন ট্রিগার হয়৷

ফেড-ইন

আমরা একটি বোতামে একটি ফেড-ইন প্রভাব তৈরি করতে রূপান্তর এবং অস্বচ্ছতার বৈশিষ্ট্যগুলি ব্যবহার করতে পারি। :হোভার নির্বাচকের সাথে মিলিত হলে, ব্যবহারকারী যখন কোনো বস্তুর উপর ঘোরায় তখন ফেড-ইন প্রভাব সক্রিয় হয়—এই ক্ষেত্রে, একটি বোতাম।

একটি ফেড-ইন বোতাম তৈরি করতে আমরা যে কোডটি ব্যবহার করতে পারি তা এখানে:

. বোতাম { প্যাডিং:20px; ফন্ট-আকার:15px; সাদা রং; পটভূমির রঙ:হালকা নীল; সীমানা:কোনোটিই নয়; -ওয়েবকিট-ট্রানজিশন-সময়কাল:0.5 সেকেন্ড; ট্রানজিশন-সময়কাল:0.5 সেকেন্ড; সীমানা-ব্যাসার্ধ:8px; অস্বচ্ছতা:0.7;}. বোতাম:হোভার { অস্বচ্ছতা:1; }

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

বাম দিকে, আপনি দেখতে পাচ্ছেন যে আমাদের বোতামটি আরও স্বচ্ছ দেখাচ্ছে। এটি অস্বচ্ছতা বৈশিষ্ট্যের মান 0.7 এ সেট করার ফলাফল।

ব্যবহারকারী বোতামের উপর ঘোরার পরে, .button:hover CSS প্রপার্টির বিষয়বস্তু পড়া হয়, যা বোতামের অস্বচ্ছতাকে 1 এ সেট করে। এটি আমাদের বোতামটিকে সম্পূর্ণরূপে অস্বচ্ছ করে তোলে (স্বচ্ছ নয়)।

উপসংহার

HTML একটি ওয়েব পৃষ্ঠার একটি বোতামের গঠন সংজ্ঞায়িত করে। একবার আপনি একটি বোতাম সংজ্ঞায়িত করার পরে, আপনি আপনার প্রয়োজনের উপর ভিত্তি করে এটি কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন।

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