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

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

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

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

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

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

موفق باشید.

یا علی

Source

سون لرن • آموزش...