جلسه ۳۱ – لینک ها به صورت دکمه ها ( مقدمه ای از 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 15px;
}

نتیجه:

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

نکته: سعی کنین همیشه 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

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

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

36873

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

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

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

16 نظر

16 پاسخ

  1. a
    {
    padding:15px 20px;
    background-color:#30b7e4;
    color:rgb(0, 0, 0);
    border-radius:5px;
    font-family: IRANSans;
    text-decoration: none;
    margin-top:20px;
    display:inline-block;
    }

    a:hover{
    background-color:#0f0f0f;
    color: #ffffff;
    transition: .2s ease-in;
    }

    click

  2. فکر کنم خوب باشه. یک سری تغیرات ایجاد کردم. امیدوارم خوشتون بیاد.

    *{
    padding:0px;
    margin:0px;
    box-sizing:border-box;
    }

    body , html{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    }

    a{
    padding:15px 30px;
    background-color:blue;
    color:white;
    border-radius:5px;
    text-decoration: none;
    font-family: ‘Segoe UI’;
    transition-duration: 200ms;
    }

    a:hover{
    opacity: 60%;
    }

    1. سلام محمدصفا، ممنون ازت 🙂 به خصوص ترنزیشن که خیلی خوبش کرده.
      پاسخ درستت ثبت شد

  3. سلام، قسمتی از کد که ویرایش کردم:‌
    a{
    padding:20px 30px;
    background-color:lightblue;
    color:white;
    border-radius:5px;
    text-decoration: none;
    font-family: Iransansweb;

    }

    a:hover{
    background-color:#e52165;
    border-radius:8px;
    }

    1. سلام حسین عزیز، ممنون ازت پاسخت درسته. دکمه حالا خیلی بهتر به نظر میاد 🙂

  4. من فقط تغییرات رو گذاشتم
    a{
    padding:15px 20px;
    background-color:#30b7e4;
    color:rgb(0, 0, 0);
    border-radius:5px;
    font-family: IRANSans;
    text-decoration: none;
    }

    a:hover{
    background-color:#0f0f0f;
    color: #ffffff;
    transition: .2s ease-in;
    }

  5. سلام
    جواب سوال:
    اول اینکه پس زمینه hover سفید است و برای همین وقتی پس زمینه سفید باشه وقتی رو لینک می رویم لینک دیده نمیشود و برای بهتر شدن لینک می تونیم صفت text decoratio رو اضافه کنیم

    1. سلام علی اکبر. ممنون ازت پاسخت کاملا صحیحه?
      البته یه نکته دیگم وجود داره، اونم اینه ک باید padding چپ و راست، از بالا و پایین بیشتر باشه. این نکته مربوط به طراحی بصریه و ربطی به کدنویسی نداره، اما تو ذهنمون داشته باشیم خوبه

  6. سلاااااااام
    وایییییییی مررررررررررسی از اینکه این آموزشو گذاشتین نزدیک سه ماه بود دنبال همچین چیزی میگشتممممم?????
    ولی یه سوالی داشتم
    اینکه ما وقتی کد اینا رو درست کردیم باید کجا بذاریمشون تا کار کنن؟؟؟؟ توی قسمت جاوا اسکریپتای وبلاگ یا یه جای دیگه؟؟
    بازم ممنون از اینک هاین مطلبو گذاشتین خیلی دنبالش بود مرسییییییی سایتتون بهترینهههههههههههههههه??????

    1. سلام لیدی بلانس. خواهش میکنیم. خیلی خوشحالیم که مقاله مفیدی بوده برات ??
      قرار دادن این کد ها توسط سه روش مختلف میتونه انجام بشه که ما این سه روش رو تو سه مقاله اتصال CSS خارجی، اتصال CSS داخلی و اتصال CSS درون خطی به صورت کامل توضیح دادیم، یه سر بهشون بزن.

  7. سلام ممنون از آموزش خوبتون
    یک سوال داشتم
    توی قدم سوم نوشتید padding بالا و پایین باید همیشه از padding چپ و راست کمتر باشه!! میشه بدونم چرا؟
    بعدشم شما خودتون توی همون مثال padding برابر 10px قرار دادید (یعنی از هر طرف!)

    1. سلام محمد. ببین این بحث مربوط به طراحی کلی صفحه (UI و UX) میشه و از نظر فنی مشکلی ایجاد نمیکنه. اما بهتره که کدنویسا هم در موردش بدونن و استانداردش رو رعایت کنن.
      بنابراین اگه ما تو کدنویسی پدینگ چپ و راست رو از بالا و پایین، کمتر قرار بدیم باز هم مشکلی پیش نمیاد اما این طراحی کاربر رو زده میکنه
      به هر حال مطابق نظرت یه تغییر ریز تو این مقاله ایجاد میکنیم، مرسی از توجهت 🙂 ?

  8. a{
    padding:30px 20px;
    background-color:lightblue;
    color:white;
    border-radius:5px;
    text-decoration: none;
    }

    a:hover{
    background-color:gray;
    color: lightblue
    }

    1. ممنون مهدی جان از پاسخت. hover اوکی شده، text-decoration هم همینطور. ولی تو قسمت padding نکته “پدینگ بالا و پایین باید از چپ و راست کمتر باشه” رعایت نشده.

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=