Анимированная кнопка

2024-06-07 13:25

Просто прикольная модификация кнопки

Добавляете кнопку в Zero-block и добавляете ей класс: btn-sendys
Ставим ей любой цвет, который вам покажется красивым после добавления анимации

Добавляете этот код в T123:

<style>
    .btn-sendys .tn-atom {
        background: radial-gradient(circle at 20% 20%, rgba(255, 0, 0, 0.5), transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(0, 0, 255, 0.5), transparent 50%),
                    radial-gradient(circle at 20% 80%, rgba(0, 255, 0, 0.5), transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255, 255, 0, 0.5), transparent 50%);
        background-size: 200% 200%;
        animation: GradientAnimation 3s ease infinite;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    @keyframes GradientAnimation {
        0% {
            background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
        }
        50% {
            background-position: 100% 100%, 0% 0%, 100% 0%, 0% 100%;
        }
        100% {
            background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
        }
    }
</style>

Ахмед Рамазанов