ساخت دکمه لینک دار زیبا با html
ساخت دکمه لینک دار زیبا با html و css همراه با مثال. در این بخش از آموزش html به سراغ ساخت دکمه های زیبا می رویم. از این دکمه ها می توانید در پروژه های خود استفاده کنید.
این آموزش متعلق به سایت ، تاپ سایت 98 میباشد.
ساخت دکمه لینک دار :
یک مثال از ساخت دکمه لینک دار زیبا را در قسمت پایین مشاهده خواهید کرد.
در مثال زیر ابتدا یک کلاس بنام btn ایجاد کردیم که در تمام دکمه های لینک دار مشترک میباشد. سپس برای هر دکمه رنگ مشخصی قرار دادیم.
باید توجه کنید می توانیم برای هر دکمه یا تگ a در html چندین کلاس تعریف و استفاده کنیم.
از دستور opacity نیز استفاده کردیم تا میزان شفافیت دکمه ها را هنگام هاور کردن کم کنند تا کاربر متوجه تغییری شود و جذابیت دکمه ها را بیشتر کنیم.
<html>
<head>
<style>
.btn{
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border: 1px solid #f0fff0;
}
.btn:hover{
opacity: 0.8;
}
.btn1{background-color: #4CAF50;}
.btn2 {background-color: #008CBA;}
.btn3 {background-color: #f44336;}
.btn4 {background-color: #e7e7e7; color: black;}
.btn5 {background-color: #555555;}
</style>
</head>
<body>
<h2>Button TopSite98.com</h2>
<a class="btn btn1">Green</a>
<a class="btn btn2">Blue</a>
<a class="btn btn3">Red</a>
<a class="btn btn4">Gray</a>
<a class="btn btn5">Black</a>
</body>
</html>
توضیحات مربوط به ساخت دکمه لینک دار زیبا در html :
در بخش توضیحات مربوط به ساخت دکمه لینک دار زیبا در html ، کدهای مختلف html , css را بررسی می کنیم.
کد ساخت دکمه در html :
با استفاده از تگ a یا لینک در html می توانیم یک دکمه زیبا ایجاد کنیم.
برای اینکه تگ a در html جذابیتی ندارد بایستی از css استفاده کرد.
برای اینکه بتوانیم از css استفاده کنیم بایستی از class استفاده کنیم تا مشخص کنیم که منظور ما کدام تگ ها هستند.
در مثال زیر از دو کلاس بنام های btn , btn1 استفاده کرده ایم.
باید توجه داشته باشید می توانیم همزمان از چند کلاس در html برای هر تگ استفاده کنیم.
کد ساخت دکمه در css :
در قسمت پایین کد ساخت دکمه در css را می بینید. کد css را در تگ style قرار می دهیم.
با استفاده از کلاس btn یک دکمه زیبا را ایجاد کرده ایم. حال می توانیم این کلاس را به هر تگ html نسبت دهیم.
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border: 1px solid #f0fff0;
}
کد هاور دکمه لینک دار زیبا :
در بخش زیر کد هاور دکمه لینک دار زیبا را می بینید.
برای زیباتر شدن دکمه می توانیم از هاور استفاده کنیم. وقتی کاربر روی دکمه با موس قرار بگیرد این کدها اجرا می شود.
opacity: 0.8;
}
تغییر رنگ دکمه در html :
برای تغییر رنگ دکمه در html می بایست از css استفاده کرد.
در مثال بالا تغییر رنگ دکمه را مشاهده می کنید. با دستور background-color می توانید رنگ پس زمینه را مشخص کنید.
با دستور color نیز می توانید رنگ متن را تغییر دهید. در هر قالب سایت ، سعی کنید از یک ترکیب رنگی استفاده کنید یعنی در کل قالب 3 رنگ را استفاده کنید.
برای تغییر رنگ دکمه هنگام هاور باید از دستور hover استفاده کنید. در مثال بالا برای هاور دکمه ، شفافیت را کمتر کرده ایم تا جذابیت دکمه را بیشتر کنیم .
لینک دادن به button در html:
برای لینک دادن به button یا دکمه در تگ a بایستی از ویژگی href استفاده کنید.
آدرس سایت یا صفحه وب را در href قرار دهید. برای قرار دادن آدرس سایت بایستی از http یا https استفاده کنید. مثلا https://topsite98.com .
منبع: تاپ سایت 98
تگ: کد html و css
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید