دکمه

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

استفاده

برای ساخت دکمه در جغد، می‌توان با اضافه کردن کلاس‌های joqd و دیگر کلاس‌های اندازه، نوع، اِفکت و رنگ‌ها به پیوند یا link (<a href="#"></a>)، دکمه یا button (<button>) و ثبت یا submit (<input type="submit">) این کار را انجام داد.

همچنین می‌توانید با کلاس disabled یا صفت disabled، دکمه‌ها را غیر فعال کنید.

اندازه‌ها

به کمک جغد می‌تواند دکمه‌هایی در ۴ ابعاد مختلف بسازید:

  • دکمه‌ی بزرگ با کلاس large

  • دکمه‌ی متوسط با کلاس medium

  • دکمه‌ی کوچک با کلاس small

  • دکمه‌ی ریز با کلاس mini

<a href="#!" class="joqd large flat pink-darken-2 soft-corner button">یک دکمه‌ی بزرگ</a>
<a href="#" class="joqd medium flat teal-darken-1 soft-corner button">یک دکمه‌ی متوسط</a>
<a href="#" class="joqd small flat orange soft-corner button">یک دکمه‌ی کوچک</a>
<a href="#" class="joqd mini flat blue soft-corner button">یک دکمه‌ی ریز</a>

همچنین می‌توان به کمک کلاس full-width، دکمه‌ای تمام عرض (نسبت به عنصر پدر) ساخت.

  • تمام عرض بودن دکمه، با دیگر اندازه‌ها در تضاد نیست؛ بلکه تکمیل کننده‌ی آن است. بنابراین باید در کنار یکدیگر استفاده شوند.

<a href="#" class="joqd large medium full-width purple-lighten-1 soft-corner button">یک دکمه‌ی متوسط تمام عرض</a>

انواع

به طور کلی ۲ مدل دکمه در جغد وجود دارند:

  • دکمه‌ی بلند شده با کلاس raised

  • دکمه‌ی صاف با کلاس flat

<a href="#" class="joqd medium raised red soft-corner button">یک دکمه‌ی بلند‌شده</a>
<a href="#" class="joqd medium flat light-blue soft-corner button">یک دکمه‌ی صاف</a>

اِفکت‌ها

هر مدل از دکمه‌ها اِفکت‌های مخصوص به خود را در حالت‌های هاور (hover) و کلیک (click) دارد.

تغییر رنگ

می‌توان در حالت هاور رنگ عنصر (پس‌زمینه، متن و یا لبه) را عوض کرد. برای این کار کافی است تا بعد از کلاس joqd و رنگ مورد نظر، پسوند hover- را اضافه کنید.

این اِفکت برای تمام دکمه‌ها قابل اجرا است.

<a href="#" class="joqd teal deep-purple-hover raised medium soft-corner button">هاور کنید</a>
بلند شدن

می‌توان در حالت هاور عنصر را لیفت (lift) داد. برای این کار کافی است تا بعد از کلاس joqd کلاس lift-hover را اضافه کنید.

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

<a href="#" class="joqd amber-lighten-1 raised medium soft-corner lift-hover button">هاور کنید</a>
موج

می‌توان در زمان کلیک شدن دکمه‌ها، به آن‌ها افکت موج (ripple) داد. برای این کار لازم است تا بعد از کلاس joqd کلاس ripple-click را اضافه کنید.

این افکت برای تمام دکمه‌ها قابل اجرا است.

از آنجایی که این افکت به javascript نیاز دارد، حتما joqd.js را به صفحه اضافه کنید.

برای این این افکت، این آپشن وجود دارد که موج یا روشن‌تر باشد یا تیره‌تر (موج‌ها به صورت پیش‌فرض روشن‌تر هستند):

  • برای موج روشن‌تر کلاس ripple-lighten را اضافه کنید.

  • برای موج تیره‌تر کلاس ripple-darken را اضافه کنید.

<a href="#" class="joqd pink raised medium soft-corner ripple-click ripple-lighten button">کلیک کنید</a>
<a href="#" class="joqd pink raised medium soft-corner ripple-click ripple-darken button">کلیک کنید</a>
نشستن

می‌توان در زمان کلیک، عنصر را نشاند (set). برای این کار لازم است بعد از کلاس joqd، کلاس set-click را اضافه کنید.

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

<a href="#" class="joqd green raised medium soft-corner set-click button">کلیک کنید</a>
فرو رفتن

می‌توان در زمان کلیک، عنصر را فرو برد (sink). برای این کار لازم است بعد از کلاس joqd، کلاس sink-click را اضافه کنید.

این افکت فقط برای دکمه‌های صاف قابل اجرا است.

<a href="#" class="joqd yellow raised medium soft-corner sink-click button">کلیک کنید</a>