آخرین بازبینی: ۱۴۰۳/۰۵/۲۳

ساخت دکمه لینک‌دار با HTML و CSS

برای ساخت دکمه لینک دار html که کاربران را به یک صفحه‌ی دیگر هدایت می‌کند، دو روش شناخته شده وجود دارد. در ادامه این دو روش را به شما آموزش می‌دهیم.

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

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

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

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

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

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>Button Project - rokaweb.ir</title>
</head>
<body>
	<button type="button">طراحی سایت - روکا</button>
</body>
</html>

<!doctype html>

<head>

<title>Button Project - rokaweb.ir</title>

</head>

<body>

<button type="button">طراحی سایت - روکا</button>

</body>

</html>

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

لینک دادن به button در html

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

<button type="button" onclick="location.href='https://rokaweb.ir';">
	طراحی سایت - روکا
</button>

طراحی سایت - روکا

</button>

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

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

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

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

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

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>Button Project - rokaweb.ir</title>
</head>
<body>
	<a href="https://rokaweb.ir" class="button">طراحی سایت - روکا</a>
</body>
</html>

<!doctype html>

<head>

<title>Button Project - rokaweb.ir</title>

</head>

<body>

<a href="https://rokaweb.ir" class="button">طراحی سایت - روکا</a>

</body>

</html>

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

<!doctype html>
<html lang="fa">
<head>
	<meta charset="UTF-8">
	<title>Button Project - rokaweb.ir</title>
	<style>
		body {
			text-align: center;
			direction: rtl;
			font-family: tahoma;
		}
		
		a.button {
			display: inline-block;
			padding: 0.5em 2em;
			background-color: #088;
			color: #fff;
			text-decoration: none;
			border-radius: 0.2em;
			border-bottom: 2px solid #044;
		}
		
		a.button:hover {
			background-color: #0aa;
			border-bottom-color: #088;
		}
	</style>
</head>
<body>
	<a href="https://rokaweb.ir" class="button">طراحی سایت - روکا</a>
</body>
</html>

<!doctype html>

<head>

<title>Button Project - rokaweb.ir</title>

<style>

body {

text-align: center;

direction: rtl;

font-family: tahoma;

}

a.button {

display: inline-block;

padding: 0.5em 2em;

background-color: #088;

color: #fff;

text-decoration: none;

border-radius: 0.2em;

border-bottom: 2px solid #044;

}

a.button:hover {

background-color: #0aa;

border-bottom-color: #088;

}

</style>

</head>

<body>

<a href="https://rokaweb.ir" class="button">طراحی سایت - روکا</a>

</body>

</html>

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

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

<a href="https://rokaweb.ir" class="button" target="_BLANK">
	طراحی سایت - روکا
</a>

طراحی سایت - روکا

</a>

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

<a href="https://rokaweb.ir" class="button" onclick="return confirm( 'آیا مطمئنید که این لینک را باز می‌کنید؟' )">
	طراحی سایت - روکا
</a>

طراحی سایت - روکا

</a>

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

۸ نظر در مورد «ساخت دکمه لینک‌دار با HTML و CSS»

علی می‌گوید: ۱۳۹۸/۰۶/۰۸ ساعت ۱۸:۰۴

خیلی خوب

پاسخ
احمد می‌گوید: ۱۳۹۸/۰۷/۱۱ ساعت ۲۱:۵۴

از آموزش های خوبتون نهایت تشکر را دارم

پاسخ
- Destroy_X می‌گوید: ۱۴۰۱/۰۴/۰۷ ساعت ۱۷:۵۸
  
  https://www.w3schools.com
  
  پاسخ
محمد مهدی محمودی می‌گوید: ۱۴۰۰/۰۵/۲۰ ساعت ۰۴:۳۳

واقعا سایتتون بهم کمک کرد واقعا ممنون

پاسخ
pedram می‌گوید: ۱۴۰۰/۰۸/۱۲ ساعت ۲۳:۱۱

شما عالی هستین !

پاسخ
محمد می‌گوید: ۱۴۰۲/۰۲/۳۰ ساعت ۰۷:۳۴

عالی بود

پاسخ
Amin می‌گوید: ۱۴۰۳/۰۲/۲۵ ساعت ۱۷:۲۴

سلام من میخوام یک سایت فروشگاهی بزنم و همه کدش رو آماده کردم ولی فقط سبد خرید مونده
میخوام وقتی رو دکمه افزودن به سبد خرید کیلیک کنم بره تو صفحه html جدید (صفحه سبد خرید)

پاسخ
- روکا می‌گوید: ۱۴۰۳/۰۲/۲۶ ساعت ۱۶:۵۱
  
  با سلام
  ساخت صفحه سبد خرید، نیاز به برنامه‌نویسی دارد. اگر این صفحه را قبلا برنامه‌نویسی کرده‌اید و فقط لینک به این صفحه مانده است، کافی است تا از کدهای بالا استفاده کنید و یک لینک به این صفحه ایجاد کنید
  ولی اگر صفحه‌ی سبد خرید را برنامه‌نویسی نکردید، مقدار کدهای قابل توجهی لازم است تا یک صفحه‌ی خرید کامل و بدون نقص را آماده کنید.
  
  پاسخ

ساخت دکمه لینک‌دار با HTML و CSS

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

لینک دادن به button در html

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

بیشتر بخوانید:

۸ نظر در مورد «ساخت دکمه لینک‌دار با HTML و CSS»

دیدگاهتان را بنویسید لغو پاسخ