طراحی دکمه با افکت شناور

Creative Button Hover Effect Using CSS Clip Path Property

دوره: طراحی صد پروژه‌ی انیمیشن و افکت‌ حرکتی با CSS

در این قسمت از دوره‌ی آموزشی قرار است افکتی شناور را با استفاده از ویژگی clip-path، برای دکمه ایجاد کنیم. دکمه‌ای که داریم به شیوه‌ای خاص به دو قسمت سفید و بنفش تقسیم شده است. وقتی که موس را بر روی قسمت سفید می‌بریم، پس‌زمینه‌‎ی کل دکمه سفید می‌شود و . وقتی که موس را بر روی قسمت بنفش می‌بریم، پس‌زمینه‌‎ی کل دکمه بنفش می‌شود. برای تقسیم کردن دکمه به دو بخش از ویژگی clip-path استفاده می‌کنیم. پس به وب‌سایت clippy می‌رویم و به صورت دستی، شکل مدنظر را ایجاد می‌کنیم. در نهایت سعی می‌کنیم با انتخاب کردن بخش‌های مختلف و دادن کدهای ایجادشده توسط وب‌سایت، افکت موردنظر را ایجاد می‌کنم.

سطح : مقدماتی تا متوسطه