ممكن شرح عمل ميض باكثر من لون عن تمرير الماوس

⚪ آخر ظهور لمؤلف الموضوع قبل (23 ساعة)
الحالة
مغلق و غير مفتوح للمزيد من الردود.
M

masrysat.com

عضو جديد
عضو كود نت
إنضم
21/05/2026
المشاركات
22
ممكن شرح عمل ميض باكثر من لون عن تمرير الماوس
 
تريد الوميض يعمل على كُل الازرار او اين المكان محدد الذي ترغب به ؟
 

مصرى سات

منتدى مصرى سات تحميل ملفات القنوات وتحميل فلاشات الريسيفرات وفلاشات الشاشات وشرحات الاجهزه سوفت وير صيانه ريسيفر اطباق تركيب دش
masrysat.com masrysat.com
 
masrysat.com قال:

مصرى سات

منتدى مصرى سات تحميل ملفات القنوات وتحميل فلاشات الريسيفرات وفلاشات الشاشات وشرحات الاجهزه سوفت وير صيانه ريسيفر اطباق تركيب دش
masrysat.com masrysat.com
أنقر للتوسيع...
CSS: 
/* إضافة تأثير وميض على جميع الأزرار */
.button,
a.button,
.button--primary,
.button--secondary,
.button--cta,
.button--link,
input[type="submit"],
input[type="button"],
button {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.button:hover,
a.button:hover,
.button--primary:hover,
.button--secondary:hover,
.button--cta:hover,
.button--link:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    animation: xenforo-flash 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(var(--button-primary-bg-rgb, 59, 130, 246), 0.6);
    transform: translateY(-2px);
}

/* تأثير الوميض */
@keyframes xenforo-flash {
    0% {
        filter: brightness(1);
    }
    25% {
        filter: brightness(1.3);
    }
    50% {
        filter: brightness(1);
    }
    75% {
        filter: brightness(1.2);
    }
    100% {
        filter: brightness(1);
    }
}

/* تأثير إضافي: وميض من الداخل */
.button::after,
a.button::after,
.button--primary::after,
input[type="submit"]::after,
button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.button:hover::after,
a.button:hover::after,
.button--primary:hover::after,
input[type="submit"]:hover::after,
button:hover::after {
    transform: translateX(100%);
}

طريقة التركيب:
الخيار: عبر لوحة التحكم
1. اذهب إلى لوحة تحكم الإدارة → المظهر → القوالب
2. ابحث عن قالب extra.less
3. ألصق الكود في نهاية القالب
4. احفظ التغييرات

تحياتي
اخوك مهدي حميد ..

جرب الكود واعطني النتيجة ؟
 
masrysat.com قال:
نعم الافتراضى ومعدل الوانه فقط
أنقر للتوسيع...
استخدم هذا الكود ..
CSS: 
/* تأثير الوميض عند تمرير الماوس على الأزرار */
.button, .button:visited {
    transition: opacity 0.3s ease-in-out;
}

.button:hover {
    animation: flash-animation 1s infinite;
}

@keyframes flash-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
 
masrysat.com قال:
الكود بيعمل وضيفه اخى غير المطلوبه اخى
أنقر للتوسيع...
حسب شرحك ، انتَ احتجت وميض عند مرور الماوس وهذا الوميض ...

ان شاء الله 20 دقيقه وافتح الابتوب تبعي واوفر لك الوميض الخاص باستاذ تركي ..
 
صديقي العزيز يمكنك استخدام هذا الكود الماخوذ من موقع الاخ شقاوي
CSS: 
.button,a.button {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid hsla(0,0%,0%,0);
    white-space: nowrap;
    -webkit-transition: background-color .125s ease,border-color .125s ease,color .125s ease;
    transition: background-color .125s ease,border-color .125s ease,color .125s ease;
    font-size: 13px;
    padding-top: 8px;
    padding-left: 10px;
    padding-bottom: 8px;
    padding-right: 10px;
    text-align: center;
    background: hsl(194,87%,25%);
    color: hsl(0,0%,100%);
    position: relative;
    overflow: hidden;
    z-index: 2
}

.button:hover:before,a.button:hover:before {
    width: 100%
}

.button:before,a.button:before {
    background-color: hsla(0,0%,0%,.5);
    content: '';
    position: absolute;
    width: 0%;
    height: 100%;
    transition: all .3s;
    z-index: -1;
    bottom: 0;
    right: 0
}

@keyframes glowing {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }

    100% {
        background-position: 0 0
    }
}

تحياتي لك
اخوك مهدي حميد
@masrysat.com
 
codeNET قال:
صديقي العزيز يمكنك استخدام هذا الكود الماخوذ من موقع الاخ شقاوي
CSS: 
.button,a.button {
    display: inline-block;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid hsla(0,0%,0%,0);
    white-space: nowrap;
    -webkit-transition: background-color .125s ease,border-color .125s ease,color .125s ease;
    transition: background-color .125s ease,border-color .125s ease,color .125s ease;
    font-size: 13px;
    padding-top: 8px;
    padding-left: 10px;
    padding-bottom: 8px;
    padding-right: 10px;
    text-align: center;
    background: hsl(194,87%,25%);
    color: hsl(0,0%,100%);
    position: relative;
    overflow: hidden;
    z-index: 2
}

.button:hover:before,a.button:hover:before {
    width: 100%
}

.button:before,a.button:before {
    background-color: hsla(0,0%,0%,.5);
    content: '';
    position: absolute;
    width: 0%;
    height: 100%;
    transition: all .3s;
    z-index: -1;
    bottom: 0;
    right: 0
}

@keyframes glowing {
    0% {
        background-position: 0 0
    }

    50% {
        background-position: 400% 0
    }

    100% {
        background-position: 0 0
    }
}

تحياتي لك
اخوك مهدي حميد
@masrysat.com
أنقر للتوسيع...
تسلم الايادى يا محترم الكود تمام
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.
عودة
أعلى أسفل