تعیین استایل لینک ها به صورت دکمه در CSS

یکی از استایل های رایج CSS برای لینک ها، استایل های مشابه دکمه است. با چنین استایلی می‌توانید برخی از لینک های موجود در صفحه که با مفهوم دکمه همخوانی دارند (مانند لینک ورود/ثبت نام) را به شکل یک دکمه دربیاورید.

برای استایل دکمه ای در CSS لازم است رنگ زمینه و (متناسب با آن) رنگ متن لینک (با کمک ویژگی‌های background-color و color) تغییر داده شود. ایجاد فاصله پیرامون متن داخل فضای دکمه (با کمک ویژگی padding)، ایجاد گوشه های گرد (با کمک ویژگی border-radius) و تراز وسط کردن متن (با کمک ویژگی text-align) برای زیبایی بهتر لینک دکمه ای پیشنهاد می‌شود. در حالت دکمه، خط تزئین متن نیز با کمک مقدار none برای ویژگی text-decoration حذف می‌شود.

با تخصیص مقدار inline-block به ویژگی display نیز لینک ضمن حفظ حالت اینلاین، به صورت یک باکس مجزا در می‌آید.

تغییر رنگ زمینه به رنگی مشابه اما پررنگ‌تر (یا کم رنگ‌تر) هنگام قرارگیری نشانگر ماوس روی لینک یکی دیگر از موضوعات رایج در مورد لینک های دکمه ای شکل است. این تغییر رنگ باعث می‌شود حالت دکمه ای لینک و قابل کلیک بودن آن جلوه بیشتری پیدا کند.

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

a {
  display: inline-block;
  background-color: #0cb30f;
  color: white;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
}

a:hover {
  background-color: #0a880c;
}

See the Pen Link buttons by techdic (@techdic) on CodePen.

بازگشت به فهرست مجموعه آموزشی CSS