آموزش CSS (قسمت ۷)

آموزش-css-قسمت-۷

در بخش های قبلی آموزش با کلیات CSS و نحوه استفاده از آن به روش های مختلف (داخلی، خطی، فایل خارجی) آشنا شدید و حالا وقت آن رسیده کم کم بریم سراغ پروژه های عملی و کاربردی که در طراحی های ظاهر سایت (UI)‌ کاربرد زیادی خواهند داشت و قصد من از این آموزش، یاد گیری کاربردی و عملی شما می باشد ولی برای شروع نیاز به آشنایی پایه ای با زبان ها می باشد و برای همین از پایه شروع به آموزش مطالب مهم و کاربردی می کنم تا بتوانم آموزش های پیشرفته و کاربردی رو براتون قرار بدم.در این آموزش می خوام نحوه ساخت دکمه های مختلف و کاربردی رو بهتون آموزش بدم.برای ایجاد یک دکمه ساده در HTML از تگ <button> استفاده می شود که ظاهر چندان جالبی ندارد  ولی با استفاده از CSS می توانیم رنگ و شکل های زیادی برای همین دکمه بدیم و سفارشی سازی بکنیم.به کدهای زیر توجه کنید :‌

ایجاد دکمه ساده در HTML : 

<button> HTML ایجاد دکمه ساده در </button>
<input type="submit" value=" (form) ایجاد دکمه برای فرم ها ">

در کدهای بالا ما توسط تگ های HTML می توانیم دکمه هایی بسازیم و تفاوت آن ها :

  • <button> : ساخت دکمه ساده که باید توسط JavaScript‌ ویا JQuery‌ و یا زبان های دیگر برایش رویداد تعریف کنیم.
  • input : ساخت دکمه ای برای ارسال اطلاعات یک فرم HTML مانند ارسال نظرات کاربران جهت ذخیره سازی (در آموزش های بعدی به این بحث اشاره خواهم کرد)

خب حالا می خواهیم ظاهر این دکمه های HTML رو تغییر بدیم و به شکل دلخواه خودمان تبدیل کنیم.برای این کار باید از کدهای CSS استفاده کنیم و به دکمه ها استایل Style بدهیم.

کدهای CSS :

<style>
    .dr-btn{
        padding:8px;
        border:none;
        font-size: 14px;
        margin:5px;
    }
    .dr-btn:hover{
        cursor: pointer;
    }
    .btn-orange{
        background-color: #FF5722;
        border:1px solid rgb(240, 75, 24);
        color:#fff;
    }
    .btn-blue{
        background-color: #03A9F4;
        border-radius: 10px;
        color:#fff;
    }
    .btn-yellow{
        background-color: #8BC34A;
        border-bottom: 2px solid rgb(86, 128, 38);
        color:#fff;
    }
    .btn-green{
        background-color: #FFEB3B;
        color:#000;
        box-shadow: 0 3px 4px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
</style>

با کدهای CSS بالا توانستیم دکمه های ایجاد شده با HTML را تغییر دهیم و به شکل و رنگ دلخواه خودمان تبدیل کنیم.با class های مختلف می توانیم برای هر یک از دکمه ها یک شکل و استایل دلخواهی اعمال کنیم که من برای 4 دکمه با class های مختلف استایل های متفاوتی را تعریف کردم و می توانید استایل های متفاوتی رو خودتان امتحان کنید.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟