تو دنیای طراحی وب، مفاهیم مختلفی برای بهتر شدن رابط کاربری و تجربه کاربری وجود داره. یکی از این مفاهیم که شاید توی کدهای CSS بشنوید، سلکتور :active هست. این سلکتور برای انجام تغییرات روی المان‌هایی استفاده میشه که کاربر باهاشون در حال تعامل هست. مثلا وقتی یک دکمه رو فشار میدی و قبل از اینکه از روش برداری، به صورت کوتاه مدت می‌خوای استایلی متفاوت بهش بدی.
سلکتور :active بهت اجازه میده وقتی روی یک لینک یا المان مثل دکمه کلیک میکنید، شرایط ظاهری اون رو تغییر بدی. این کار به کمک ترکیب با سایر سلکتورها میتونه حس زنده‌تری به کاربر بده و تجربه کاربری رو بهبود بده.
تصور کن که می‌خوای وقتی کاربر روی دکمه کلیک میکنه، پس زمینه‌ی دکمه تغییر کنه تا احساس بازخورد بصری آنی‌تری ایجاد بشه. این بازخورد به کاربران نشون میده که سایت به اقداماتشون واکنش نشون میده.
یک مثال معمول از استفاده‌ی :active میتونه تغییر رنگ یک دکمه وقتیه که فشار داده شده. این تغییر جزئی ولی مهم میتونه به کاربران نشون بده که دکمه فعال شده.
ترکیب استفاده از :active با سایر تکنیک‌های CSS مثل :hover میتونه به شما کمک کنه تا طرح‌های تعاملی و جذاب‌تری ایجاد کنی که در نهایت به بهبود تجربه کلی سایت کمک میکنه.
button:active {
background-color: #3e8e41;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
transform: translateY(2px);
}
button:active
به ما میگه که میخوایم تغییرات رو روی دکمه‌ای که در حالت فعال هست اعمال کنیم.
background-color: #3e8e41;
این خط باعث میشه رنگ پس زمینه دکمه، وقتی که روی اون کلیک شده، به رنگ سبز تیره تغییر کنه.
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
این خط به دکمه یه سایه داخلی اضافه میکنه که حس فشار دادن رو تقویت میکنه.
transform: translateY(2px);
این خط باعث میشه دکمه یه مقدار به سمت پایین منتقل بشه تا به نظر واقعی‌تر بیاد و حس کلیک رو القا کنه.