এই উদাহরণটি শুধুমাত্র জেনারেটরের কন্ট্রোল ব্যবহার করে। উপরের ছবিগুলো সাধারণ HTML বাটনে প্রয়োগ করা আসল ডাউনলোড করা স্টাইলশিট দেখায়, এডিটরের স্ক্রিনশট নয়।
সিগনেচার দিয়ে শুরু করুন
CSS বাটন জেনারেটর খুলুন। প্রিসেট-এ, এভরিডে কালেকশন থেকে সিগনেচার নির্বাচন করুন। বাটনের টেক্সট “Get started” সেট করুন। কোড এরিয়াতে, ক্লাস নেম cta-button সেট করুন।
একটি প্রিসেট ডিফল্ট এবং হোভার স্টাইল প্রতিস্থাপন করে, কিন্তু আপনার লেবেল এবং ক্লাস নেম অপরিবর্তিত থাকে। বিস্তারিত সমন্বয় করার আগে আপনার শুরুর পয়েন্ট নির্বাচন করুন।
ক্লাস নেমটি CSS রুলগুলোকে আপনার HTML বাটনের সাথে সংযুক্ত করে। জেনারেটরটি অসমর্থিত ক্যারেক্টারগুলো মুছে ফেলে; অপ্রাসঙ্গিক এলিমেন্টগুলোর স্টাইলিং এড়াতে একটি ছোট এবং স্বতন্ত্র নাম ব্যবহার করুন।
গ্রেডিয়েন্ট পিল তৈরি করুন
এডিটিং স্টেট ডিফল্ট-এ রাখুন। টেক্সট-এ, সিস্টেম স্যান্স নির্বাচন করুন, ফন্ট সাইজ 18 px এবং ওয়েট বোল্ড রাখুন। সাদা টেক্সট রঙ, সাধারণ স্টাইল, কেন্দ্রিক অ্যালাইনমেন্ট এবং লাইন হাইট 1.4 বজায় রাখুন।
ফিল-এ, লিনিয়ার গ্রেডিয়েন্ট নির্বাচন করুন। নিচের দুটি রঙ এবং অ্যাঙ্গেল ব্যবহার করুন। হরিজন্টাল প্যাডিং 32 px এবং ভার্টিক্যাল প্যাডিং 16 px সেট করুন। শেপ-এ, লিঙ্ক অল কর্নারস সক্রিয় রাখুন এবং কর্নার রেডিয়াস 100 px সেট করুন। বর্ডার উইডথ 0 px থাকবে।
শ্যাডো-তে, বক্স শ্যাডো সক্রিয় রাখুন। হরিজন্টাল অফসেট 0 px, ভার্টিক্যাল অফসেট 8 px, ব্লার 24 px, স্প্রেড −4 px, রঙ #460BD8 এবং অপাসিটি 32% ব্যবহার করুন। ইনসেট শ্যাডো এবং টেক্সট শ্যাডো বন্ধ রাখুন।
প্যাডিং টেক্সটের চারপাশের জায়গা পরিবর্তন করে। কর্নার রেডিয়াস আউটলাইন পরিবর্তন করে। একটি বড় রেডিয়াস লেবেলকে প্রশস্ত না করেই এই পিল আকৃতি তৈরি করে।
হোভারের জন্য নিজস্ব সেটিংস দিন
এডিটিং স্টেট হোভার-এ পরিবর্তন করুন। ফিল-এ, ব্যাকগ্রাউন্ড কালার #33099E এবং সেকেন্ড কালার #6D20BF-এ পরিবর্তন করুন। গ্রেডিয়েন্ট অ্যাঙ্গেল 135°-এ রাখুন। শ্যাডো-তে, ভার্টিক্যাল অফসেট 10 px এবং ব্লার 28 px-এ পরিবর্তন করুন। অন্যান্য সেটিংস অপরিবর্তিত রাখুন।
প্রতিটি স্টেট পরীক্ষা করতে ক্যানভাস ডিফল্ট, হোভার এবং অ্যাক্টিভ বাটন ব্যবহার করুন। আপনি প্রিভিউ বাটনের ওপর হোভার বা প্রেসও করতে পারেন। এর প্রান্ত এবং শ্যাডো পর্যালোচনা করতে ক্যানভাসটিকে হালকা এবং গাঢ় রঙের মধ্যে পরিবর্তন করুন।
এডিটিং স্টেট নির্বাচন করে আপনি কোন স্টাইলগুলো পরিবর্তন করবেন তা ঠিক করেন। ক্যানভাস স্টেট শুধুমাত্র প্রিভিউ পরিবর্তন করে। সাধারণ চেহারা সমন্বয় করার আগে ডিফল্ট এডিটিং-এ ফিরে যান।
যেসব হোভার প্রপার্টি ডিফল্টের সাথে মিলে যায় সেগুলো পরবর্তী ডিফল্ট এডিটের সাথে পরিবর্তিত হয়। একবার কোনো হোভার প্রপার্টি কাস্টমাইজ করলে, তা স্বাধীন থাকে। বেস স্টাইল পরিবর্তন করার পর উভয় স্টেট পুনরায় পরীক্ষা করুন।
আপনার পেজে এক্সপোর্ট এবং পরীক্ষা করুন
CSS ট্যাব নির্বাচন করুন এবং কপি CSS ব্যবহার করুন, অথবা cta-button.css সেভ করতে ডাউনলোড নির্বাচন করুন। HTML ট্যাব নির্বাচন করুন এবং সংশ্লিষ্ট বাটন মার্কআপ কপি করুন। HTML-এ একই ক্লাস নেম এবং type="button" সহ একটি বাটন অন্তর্ভুক্ত থাকে।
আপনার স্টাইলশিটে CSS যোগ করুন, অথবা আপনার পেজ থেকে ডাউনলোড করা ফাইলটি লিঙ্ক করুন। বাটনটি যেখানে প্রয়োজন সেখানে HTML বসান। দুটি এক্সপোর্ট একসাথে কাজ করে: শুধুমাত্র একটি HTML বাটন তার স্টাইলিং অন্তর্ভুক্ত করে না।
পেজটি খুলুন এবং এর ডিফল্ট, হোভার, কিবোর্ড ফোকাস এবং প্রেসড স্টেটগুলো পরীক্ষা করুন। এক্সপোর্টে একটি ফোকাস-দৃশ্যমান আউটলাইন, একটি ছোট অ্যাক্টিভ মুভমেন্ট এবং একটি রিডিউসড-মোশন রুল অন্তর্ভুক্ত থাকে। আপনার আশেপাশের স্টাইল এবং ইনস্টল করা ফন্টগুলো ফলাফলের ওপর প্রভাব ফেলতে পারে।
জেনারেট করা বাটনটি একটি স্টাইলড কন্ট্রোল। আপনার প্রজেক্টে এর ক্লিক আচরণ সংযুক্ত করুন; ফর্মে যোগ করার সময় সঠিক বাটন টাইপ ব্যবহার করুন।
cta-button.css
ডাউনলোড করা ফাইলের নাম ক্লাস নেম অনুযায়ী হয়।
সাধারণ প্রশ্নাবলী
আমার কি কোনো CSS ফ্রেমওয়ার্ক প্রয়োজন?
না। আউটপুটটি হলো স্ট্যান্ডার্ড CSS এবং একটি সাধারণ HTML বাটন। CSS আপনার নিজের স্টাইলশিটে পেস্ট করুন এবং বাটনে সংশ্লিষ্ট ক্লাসটি ব্যবহার করুন।
ডাউনলোড কি HTML-ও সেভ করে?
ডাউনলোড ক্লাস নেমের নামে একটি .css ফাইল সেভ করে। বাটন মার্কআপটি HTML ট্যাব থেকে আলাদাভাবে কপি করুন।
আমি কি প্রতিটি কোণায় আলাদা রেডিয়াস দিতে পারি?
হ্যাঁ। শেপ-এ, লিঙ্ক অল কর্নারস বন্ধ করুন, তারপর টপ লেফট, টপ রাইট, বটম রাইট এবং বটম লেফট আলাদাভাবে সেট করুন। এই উদাহরণে পিল আকৃতির জন্য সেগুলো লিঙ্ক করা রাখা হয়েছে।
পরের বার কি আমার ডিজাইন এখানে থাকবে?
স্টুডিওটি এই ব্রাউজারের লোকাল স্টোরেজে বর্তমান ড্রাফটটি সংরক্ষণ করার চেষ্টা করে। এটি কোনো অ্যাকাউন্ট বা ক্রস-ডিভাইস ব্যাকআপ নয়। ব্রাউজার সেটিংস, সাইটের ডেটা মুছে ফেলা বা রিসেট করার মাধ্যমে এটি মুছে যেতে বা প্রতিস্থাপিত হতে পারে, তাই আপনি যে কাজগুলো রাখতে চান তা এক্সপোর্ট করে রাখুন।
আমার বোতামটি কি কোনো সার্ভারে আপলোড করা হয়?
স্টাইলিং প্রিভিউ এবং CSS/HTML জেনারেশন আপনার ব্রাউজারে চলে। এক্সপোর্ট তৈরি করার জন্য এডিটর আপনার বোতামের টেক্সট বা স্টাইলিং ড্রাফট আপলোড করে না।
আপনার পরবর্তী বোতামটিকে নিজস্ব স্টাইল দিন।
একটি শুরুর পয়েন্ট বেছে নিন, ডিটেইলস অ্যাডজাস্ট করুন এবং আপনার প্রজেক্টে কোডটি নিয়ে আসুন।