راکت
حل شده

باگ تو سایت

3 پاسخ

سلام این قسمتایی که مال دکمه شیشه ای هست و دورش مربعی خط کشیدم رو تو عرض های مختلف بهم میریزه و باید حدود 20 تا مدیا کوِیری تعریف کنم تا بتونم یه کار کنم این درست نمایش داده بشه چون تو عرض های مختلف این حرکت می کنه، راه حلی دارید که بتونم اینو درستش کنم که اینهمه مدیا کویری ننویسم؟
سایتم
 تصویر

ثبت پرسش جدید

پاسخ‌ها

3
محسن عواطفی
محسن عواطفی
@webnolin

تخصص: برنامه‌نویس وب

بهترین پاسخ

سلام
لزومی نداره به before اون دکمه طول و ارتفاع 300% بدید، بهش طول 150px و ارتفاع 100% بدید، برای کج کردنش از skewX(-40deg) استفاده کنید. مقدار top رو به شکل ثابت روی 0 تنظیم کنید و مقداره left رو در حالت معمولی روی -140px و در حالت هاور روی 100% تنظیم کنید.

.class-button::before {
    content: "";
    width: 150px;
    height: 100%;
    position: absolute;
    background: var(--Second-White-Glass);
    transform: skewX(-40deg);
    top: 0;
    left: -140px;
    transition: all 0.3s ease-in-out;
}

.class-button:hover::before {
    left: 100%;
}

البته با این استایل همیشه یه گوشه از اون بخش شیشه‌ای نمایان هستش که با کم و زیاد کردن مقدار left در حالت معمولی و هاور میتونید این مورد رو هم به دلخواه خودتون تنظیم کنید.

ML
ML
@mahdilahijanian

تخصص: Web Developer

ایولا، الحق که بهترین پروگرمر خودتی.

محسن عواطفی
محسن عواطفی
@webnolin

تخصص: برنامه‌نویس وب

خواهش میکنم❤️❤️😘

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام