ساخت دکمه لینک‌دار با html و css

برای ساخت دکمه‌های قابل کلیک که کاربران را به یک لینک دیگر هدایت می‌کنند دو روش متداول وجود دارد. در ادامه این دو روش را به شما آموزش می‌دهیم.

در روش اول از تگ button استفاده می‌کنیم که از قبل شکل دکمه را دارد ولی برای هدایت کاربر می‌بایست از کدهای جاوااسکریپت استفاده کنیم.

و در روش دوم از تگ a استفاده می‌کنیم که به صورت پیش‌فرض پارامتر href را می‌پذیرد ولی شکل دکمه را ندارد و با استفاده از کدهای css شکل دکمه را برای آن ایجاد می‌کنیم.

روش اول استفاده از تگ button

تگ button برای ساخت دکمه‌های قابل کلیک طراحی شده است. این تگ اگر داخل فرم‌های html قرار بگیرد، به صورت پیش‌فرض همانند دکمه‌ی submit عمل می‌کند. برای اینکه buttonها عملکرد submit نداشته باشند، می‌بایست صفت type آن‌ها را از نوع button تعریف کنیم.

جهت ساخت دکمه، کد زیر را در یک فایل با پسوند html قرار دهید و آن را اجرا کنید:

با اجرای فایل بالا می‌بایست تصویری شبیه تصویر زیر را مشاهده کنید:

دکمه بدون لینک

این دکمه هرچند شکل دکمه را دارد ولی عملکردی ندارد و کلیک کردن روی آن بی اثر است. جهت انتقال کاربر به لینک دلخواه، کد button را به شکل زیر تغییر می‌دهیم:

اکنون اگر روی دکمه کلیک کنید، به لینک تعیین شده هدایت می‌شوید.

استفاده از این روش محدودیت‌هایی دارد:

  1. اگر بخواهیم لینک در پنجره‌ی جدیدی باز شود، ممکن است عملکرد Popup Blocker مرورگر مانع عملکرد دکمه شود.
  2. اگر در مرورگر کدهای جاوااسکریپت فعال نباشند، دکمه‌ی ما کار نخواهد کرد.

استفاده از تگ a برای ایجاد دکمه لینک دار

برای ایجاد دکمه کدهای html زیر را داخل یک فایل html قرار دهید و ذخیره نمایید:

اجرای فایل بالا صفحه‌ی شبیه صفحه زیر را به شما نشان می‌دهد:لینک سادهکلیک روی لینک بالا، ما را به سایت مورد نظر هدایت می‌کند ولی شکل آن مناسب نیست و باید با استفاده از کدهای css شکل دکمه را برای آن ایجاد کنیم. برای اینکه بتوانیم کدهای css خود را به لینک مورد نظر اعمال کنیم، از کلاس button در قطعه کدهای قبلی استفاده کردیم.

خروجی کدهای بالا به شکل زیر است:

دکمه در html

اگر می‌خواهید تا لینک در پنجره‌ای جدید باز شود، کد html تگ a را به شکل زیر تغییر دهید:

استفاده از کدهای جاوااسکریپت روی تگ a هم امکان پذیر است. برای مثال می‌توانیم قبل از هدایت کاربر از او بپرسیم که آیا از انتخاب این لینک مطمئن است یا نه:

برای تغییر ظاهر دکمه‌ی بالا به شکل‌های دلخواه دیگر به سادگی می‌توانید کدهای css دلخواه را تغییر دهید یا با جستجوی اینترنت، از دکمه‌های css موجود که شکل‌های متنوع دیگری دارند نیز استفاده نمایید.

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱