ساخت دکمه لینک دار html

در این بخش از آموزش html به سراغ ساخت دکمه لینک دار html می رویم.برای ساخت دکمه لینک دار html بایستی ابتدا کد html را نوشت و سپس به تگ a استایل یا css داد.

پروژه ساخت دکمه لینک دار html :

مثال زیر ساخت دکمه لینک دار html میباشد. در این مثال با تگ a یک دکمه را ایجاد کرده ایم و سپس با کد css آن را زیبا کرده ایم.

کد html  ساخت دکمه لینک دار html:

ابتدا تگ a نوشته می شود تگ a برای ساخت لینک یا دکمه استفاده میشود:

<a href="#" class="button">Link Button</a>

کد css ساخت دکمه لینک دار html :

سپس کد css را به آن داده ایم.

حال به توضیح آنها می پردازیم:

ویژگی background-color برای تغییر رنگ پس زمینه میباشد.

ویژگی border را nobne قرار داده ایم تا کادری دور آن نباشد.

با color رنگ متن را تغییر داده ایم.

با padding فاصله های داخلی را ایجاد کرده ایم.

با text-align متن را  وسط چین کرده ایم.

با text-decoration خط زیر متن را برداشته ایم.

با font-size سایز متن را تغیر داده ایم.

با margin فاصله بیرونی با بقیه عناصر را مشخص کرده ایم.

با cursor نوع آیکن موس را مشخص کرده ایم.

<style>
a.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>

کد کامل شده ساخت دکمه لینک دار html :


کد کامل شده ساخت دکمه لینک دار html در قسمت پایین قرار داده ایم. می توانید ان را در یک فایل html قرار داده و تست نمایید.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sh711.com</title>
<style>
a.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>sh711.com</h2>
<a href="#" class="button">Link Button</a>
</body>
</html>

درست کردن هاور :

اگر بخواهید برای دکمه هاور درست کنید می توانید از کد زیر استفاده کنید. کد زیر باعث می شود هنگام هاور کردن رنگ پس زمینه و رنگ متن تغییر کند.

a.button:hover{
background-color: blue;
color: yellow;
}

نویسنده : هدایت عباسی

ثبت نظر