کدهای جذاب و دیدنی ( Button effects ) : افکتهای ساخته شده با Border برای دکمه

زمان مطالعه: 1 دقیقه
۱۳ مهر ۱۳۹۶

در این قسمت میخوام یک کد ( Button effects ) جالب رو در اختیارتون بزارم.

کدهای جذاب و دیدنی ( Button effects ) : افکتهای ساخته شده با Border برای دکمه

توضیحات مربوط به افکت های دکمه یا Button effects

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

برای ساخت این نمونه از افکت ها، در کلاسهای کاذب after و before مربوط به دکمه ها border در نظر گرفته شده و زمانی که بر روی اونا هاور میشه، اندازه و موقعیت این Border ها رو تغییر میدیم. مثلا با استفاده از border-top-color: transparent میتونیم border بالا رو مخفی کنیم.

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

موفق باشید.

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل