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

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

   پاسخ

   1. مرسی از شما، پاسخ درسته 🙂

      پاسخ

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;
   }

   پاسخ

   1. درسته متين، ممنون ازت

      پاسخ

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 نکته “پدینگ بالا و پایین باید از چپ و راست کمتر باشه” رعایت نشده.

      پاسخ