آموزش CSSآموزش طراحی سایت

جلسه ۳۱ – لینک ها به صورت دکمه ها ( مقدمه ای از buttons )

استایل دهی لینک ها به شکل دکمه

منظور از دکمه چیست؟ منظور از Button چیست؟ چگونه می‌توانیم یک دکمه در وب سایت ایجاد کنیم؟ روش ساخت دکمه در وب سایت چیست؟ کاری که در این جلسه، می‌خوایم انجام بدیم، طرح مثال های پیچیده تری از لینک ها هست که به خودی خود، می‌تونه شروعی بر طراحی و ساخت دکمه ها در CSS باشه. ( ساخت لینک دکمه ای در CSS )

تعریف دکمه سادست، یه شمایل دایره ای یا چند گوش، که در اون یک نوشته قرار می‌گیره و هروقت روش کلیک می‌شه، یک اتفاق خاص میفته. البته این دکمه ای که قرار است در این مقاله بررسی کنیم با دکمه ها در HTML متفاوت است.

قدم های طراحی دکمه

طراحی یک دکمه ساده رو در چند مرحله با هم بررسی می‌کنیم.

قدم اول – ساختار اولیه

اولین قدم، نوشتن کد HTML لینک، و یک استایل دهی ساده به اونه.

استایل ساده ای که محدوده دکمه رو مشخص کنه.

کد HTML:

<a href="#">اینجا کلیک کن</a>

کد CSS:

a{
   color: green;
   border: 5px solid green;
}

نتیجه:

مرحله اول طراحی دکمه

خب، با اینکه چهره ی جعبه ای شکل و چند گوش بهش دادیم، اما هنوز شبیه اون دکمه ی ایده آلی که ما می‌خوایم نشده.

قدم دوم – برداشتن استایل های اضافه

برای اینکه این طراحی رو بهینه تر انجام بدیم، کافیه یه مقدار متن داخل تگ a رو تغییر بدیم و خط مزاحم زیر لینک رو برداریم.

بنابراین، از خاصیت text-decoration استفاده می‌کنیم و کد CSS رو به فرم زیر می‌نویسیم:

a{
   color: green;
   text-decoration: none;
   font-family: Iransansweb;
   border: 5px solid green;
}

نتیجه:

مرحله دوم طراحی دکمه

خب، قیافه بهتری به خودش گرفت. اما هنوز یه مشکل اساسی داریم: متن داخل لینک به حاشیه ها خیلی نزدیکه!

قدم سوم – اضافه کردن فضای کافی

چی کار می‌شه کرد؟ سادست، از دستور padding استفاده می‌کنیم و یه اندازه معقول بهش اختصاص می‌دیم:

a{
   color: green;
   text-decoration: none;
   font-family: Iransansweb;
   border: 5px solid green;
   padding:10px;
}

نتیجه:

مرحله سوم طراحی دکمه

نکته: همیشه باید padding بالا و پایین، کمتر از padding‌ چپ و راست باشه.

قدم چهارم – اضافه کردن افکت مناسب

حالا بیاید یکم به این دکمه ساده خودمون، چاشنی اضافه کنیم و از حالت hover که تو مقاله حالت لینک ها در CSS میزفا یاد گرفتیم، استفاده کنیم.

می‌خوایم وقتی نشان گر رو بردیم روی لینک، رنگ پس زمینه لینک به سبز تغییر کنه. مسلما برای اینکه متن مورد نظر دیده بشه، رنگ متن باید به سفید تغییر کنه. پس قطعه کد CSS زیر رو به کدهای قبلیمون اضافه می‌کنیم:

a:hover{
   background-color: green;
   color: white;
}

نتیجه بعد از نشان کردن لینک، به صورت زیر خواهد بود:

مرحله نهایی طراحی دکمه

یک مثال دیگه!

حالا یه مثال جذاب دیگه رو بررسی کنیم:

کد HTML:

<a href="#">Mizfa</a>

کد CSS:

a{
   padding:20px;
   background-color:#e83b3b;
   font-family: monospace;
   text-decoration: none;
}

a:hover{
   background-color:#eb5656;
}

نتیجه:

دکمه در حالت hover

همونطور که می‌بینیم، رنگ اولیه و ثانویه، تفاوت چندانی با هم ندارن. نکته اینجاست که تو طراحی رابط کاربری، همیشه لازم نیست که تفاوت های بزرگ ایجاد کنیم، بلکه گاهی اوقات با کوچیک ترین تفاوت ها و تغییرات، می‌تونیم صفحه وب سایت رو جذاب کنیم.

نکته: لازم نیست که حتما، برای تغییر دادن لینک، از تغییر دادن رنگ پس زمینه استفاده کنیم. می‌تونیم این کار رو با تغییر دادن اندازه لینک، فونت لینک و خیلی از خصوصیات دیگه هم انجام بدیم.

اگه جایی از مطالب رو خوب متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین، پاسخگو خواهم بود 🙂

پایان ترم

سوال:

به دکمه زیر که با کمک عنصر a کدنویسی شده توجه کنین:

36873

این دکمه یک سری کم و کاستی ها داره. با توجه به مباحث این مقاله، چه کد هایی برای اصلاحش باید بنویسیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله آموزش css ، یاد گرفتیم که چطور می‌تونیم با کمک عنصر a یا لینک، یک دکمه مناسب طراحی کنیم.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

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

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر