কিভাবে একটি আড়ম্বরপূর্ণ এবং কার্যকরী HTML বোতাম তৈরি করবেন

একটি আড়ম্বরপূর্ণ HTML বোতাম তৈরি করুন

এমন সময় আছে যখন, ওয়েবসাইট ডিজাইন করার সময়, কিভাবে একটি তৈরি করতে হয় তা জেনে HTML বাটন এটি আপনাকে অনেক সাহায্য করে। বিশেষ করে যেহেতু আপনি একটি নকশা তৈরি করতে পারেন যা কার্যকরী এবং আড়ম্বরপূর্ণ, যাতে এটিকে চেপে না রাখা অসম্ভব এবং আপনি আপনার ওয়েবসাইটের জন্য প্রিয় ফলাফল পান।

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

একটি HTML বাটন তৈরির ধাপ

একটি HTML বাটন তৈরির ধাপ

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

মৌলিক পদক্ষেপগুলি নিম্নরূপ:

মৌলিক কাঠামো তৈরি করুন

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

আমার বোতাম

এখন, এটি কেবল অর্জন করবে যে আমাদের আরও একটি লিঙ্ক আছে, কিন্তু এটি একটি বোতামের নকশার সাথে দেখা যাবে না (যদি না আপনার ফর্ম থাকে এবং তাদের মধ্যে একটি বোতাম তৈরি করা হয়)।

কিভাবে এটি এই মত চেহারা করতে? আমরা আপনাকে বলব।

বোতামের বৈশিষ্ট্য যুক্ত করুন

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

আমার বোতাম

এটির রঙ, আকার দিন ...

অবশেষে, সেই একই কোডে আপনি বোতামের আকার, ফন্ট, মাউস না দিয়ে বাটনের রঙ নির্ণয় করার জন্য একটি স্টাইল লাইন (স্টাইল) প্রয়োগ করতে পারেন এবং এটি পাস করতে পারেন, ইত্যাদি।

HTML এ BUTTON ট্যাগ

html ভাষা

যদি আপনি যা চান তা আরও ব্যক্তিগতকৃত বোতাম তৈরি করতে হয়, তাহলে আপনি যা চান তা হল এই লেবেলটি ব্যবহার করা, যা, যদিও এর অনেক সুবিধা রয়েছে, এর অসুবিধাও রয়েছে। তবে সাধারণভাবে, এটি আপনাকে মৌলিক এবং মূল ব্যবহারের জন্য পরিবেশন করতে পারে।

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

বাটন ট্যাগ বৈশিষ্ট্য

আমরা বাটনে কী বৈশিষ্ট্য রাখতে পারি? ভাল বিশেষভাবে:

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

কিভাবে একটি অনলাইন HTML বাটন তৈরি করবেন

কিভাবে একটি অনলাইন HTML বাটন তৈরি করবেন

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

তাদের মধ্যে আমরা সুপারিশ করি:

কিং বাটন মেকার

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

শেষে, যখন আপনি Grab the code বাটনে ক্লিক করবেন, তখন আপনি HTML কোড এবং CSS দেখতে পাবেন। দুটোই সংযুক্ত করতে ভুলবেন না কারণ এটি আপনাকে যে নকশাটি চেয়েছে তা রাখতে সাহায্য করবে।

দা বাটন কারখানা

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

তারপর এটি আপনাকে একটি PNG ইমেজ হিসাবে বোতামটি ডাউনলোড করতে দেয়, কিন্তু আপনি এটি আপনার ওয়েবসাইটে এম্বেড করতে পারেন।

কল টু অ্যাকশন বাটন জেনারেটর

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

বাটন

এই টুলটি আপনি ব্যবহার করতে পারেন এমন একটি সম্পূর্ণ। আপনি এটি বিনামূল্যে ব্যবহার করতে পারেন এবং আপনি পাবেন মানের ডিজাইন, পাশাপাশি আধুনিক।

বাটন মেকার

এই টুলটি সেইগুলির মধ্যে একটি যা আপনাকে বোতামগুলি কাস্টমাইজ করার অনুমতি দেবে, বিশেষত প্রান্তের চারপাশের এলাকা, ছায়া, যদি পাঠ্যটি কেন্দ্রীভূত, ন্যায্য, ইত্যাদি।

ইমেজফু

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

হোভার ইফেক্ট গ্রাফিক বাটন জেনারেটর

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

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


মন্তব্য করতে প্রথম হতে হবে

আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।