الگو:بیشتر/styles.css: تفاوت میان نسخه‌ها

نسخهٔ ‏۱۷ دسامبر ۲۰۲۴، ساعت ۱۲:۵۸

        /* تنظیمات پایه فقط برای این بخش */
        #unique-read-more-container {
            float: left; /* دکمه به سمت چپ */
            direction: rtl; /* تنظیم جهت متن */
            padding: 20px;
        }

        #unique-read-more-container .read-more-btn {
            background: linear-gradient(45deg, #42eb9c, #36c486); /* گرادیانت سبز */
            color: #1d2b53; /* رنگ متن سورمه‌ای */
            border: none;
            border-radius: 15px;
            padding: 5px 30px; /* کاهش بیشتر ارتفاع */
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-right: 0; /* حذف فاصله از راست */
            margin-left: auto; /* دکمه به چپ چسبیده */
            text-decoration: none; /* حذف خط زیر متن لینک */
        }

        #unique-read-more-container .read-more-btn::after {
            content: '➤';
            font-size: 20px;
            transform: rotate(180deg); /* چرخش فلش به سمت چپ */
            animation: arrow-bounce 1s infinite; /* انیمیشن حرکت فلش */
            margin-right: 10px;
        }

        #unique-read-more-container .read-more-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }

        #unique-read-more-container .read-more-btn:active {
            transform: scale(0.95);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        /* انیمیشن فلش */
        @keyframes arrow-bounce {
            0%, 100% {
                transform: rotate(180deg) translateX(0); /* ثابت در حالت اولیه */
            }
            50% {
                transform: rotate(180deg) translateX(-5px); /* حرکت به چپ */
            }
        }