• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش طراحی متریال با Materialize (جلسه 10) - دکمه ها

0 360 ۳ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

دکمه ها در Materialize

Materialize تعدادی کلاسهای از پیش تعریف شده برای دکمه داره و میتونین از اونا برای زیبایی سایتتون استفاده کنید. کلاسهایی که در این مورد وجود دارند عبارتند از:

  • btn : این کلاس اجباری است و با نسبت دادن این کلاس به دکمه ها و لینکها، اون المنت بصورت دکمه Materialize در میاد
  • btn-floating : با استفاده از این کلاس، دکمه بصورت دایره در میاد
  • btn-flat : نسبت دادن افکت فلت یا تخت به دکمه
  • btn-large : بزرگ کردن دکمه مورد نظر
  • disabled : با نسبت دادن این کلاس دکمه مورد نظر استایل غیر فعال رو میگیره
  • waves-effect : با نسبت دادن این کلاس به المنت مورد نظر میتونین افکت موجدار شدن با کلیک رو برای اون المنت فعال کنید.

مثالها

Raised Buttons:

خروجی:btn1

میبینید که کلاس btn برای همه موارد قرار داده شده و زمانی که بر روی دکمه ها هاور میکنید یک افکت اجرا میشه و مثل اینه که دکمه از جای خودش بلند میشه. همچنین زمانی که بر روی دکمه کلیک میکنید یک موج پخش میشه. با استفاده از wave-teal هم رنگ موج رو مشخص کردیم. در خط آخر هم با اضافه کردن کلاس disabled، دکمه مورد نظر رو غیر فعال کردیم.

دکمه های فلت:

خروجی:btn2

همونطور که دیدید دکمه های فلت قرار داده شدن و سایه ندارن و با هاور هم از جای خود بلند نمیشن.

دکمه های بزرگ:

خروجی:btn3

همونطور که دیدید دکمه هارو با استفاده از کلاس btn-large بزرگ کردیم و همچنین با استفاده از کلاس btn-floating اونا رو بصورت دایره ای در آوردیم.

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

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram