Можно этот код extra.less

[Dark_Wender]

Можно пример на скрине код extra.less

Пример

 

[Kolpak]

А ссылка на форум, откуда брать код?

 

[Dark_Wender]

https://devline2-0.csamp.ru/

 

[Kolpak]

.kirillnortov {
    background: linear-gradient(90deg, #8b0000, #d50000, #ff1744, #ff5252, #d50000, #8b0000);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #ff4d5a;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(255,23,68,0.55),0 0 12px rgba(255,0,0,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: kirillNortovBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes kirillNortovBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.ga {
    background: linear-gradient(90deg, #006400, #00a83b, #00e676, #69f0ae, #00e676, #006400);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #69f0ae;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(0,230,118,0.55),0 0 12px rgba(0,200,83,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: gaGreenBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes gaGreenBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.gts {
    background: linear-gradient(90deg, #b8860b, #f9a825, #ffeb3b, #fff176, #ffeb3b, #b8860b);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #ffe082;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(255,235,59,0.55),0 0 12px rgba(255,193,7,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    animation: gtsYellowBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes gtsYellowBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.zgts {
    background: linear-gradient(90deg, #0277bd, #039be5, #29b6f6, #81d4fa, #29b6f6, #0277bd);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #81d4fa;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(41,182,246,0.55),0 0 12px rgba(3,155,229,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    animation: zgtsBlueBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes zgtsBlueBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.komandaprk {
    background: #f9c900;
    color: #ffffff;
    border: 1px solid #ffe082;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(249,201,0,0.45),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

.specadm {
    background: linear-gradient(90deg, #3d0000, #650000, #8b0000, #a80000, #8b0000, #3d0000);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #b71c1c;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(139,0,0,0.55),0 0 12px rgba(100,0,0,0.35),0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    animation: specadmRedBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes specadmRedBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.zga {
    background: linear-gradient(90deg, #66bb6a, #81c784, #a5d6a7, #b9f6ca, #a5d6a7, #66bb6a);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #b9f6ca;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(129,199,132,0.55),0 0 12px rgba(76,175,80,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: zgaGreenBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes zgaGreenBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.kyradm {
    background: linear-gradient(90deg, #4a148c, #7b1fa2, #ab47bc, #ce93d8, #ab47bc, #4a148c);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #ce93d8;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(171,71,188,0.55),0 0 12px rgba(123,31,162,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: kyradmPurpleBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes kyradmPurpleBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.polzovatel {
    background: linear-gradient(90deg, #4f4f4f, #707070, #9e9e9e, #bdbdbd, #9e9e9e, #4f4f4f);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #bdbdbd;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(158,158,158,0.55),0 0 12px rgba(117,117,117,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: polzovatelBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes polzovatelBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.zsa {
    background: linear-gradient(90deg, #d84343, #ff6f6f, #ff9e9e, #ffb3b3, #ff9e9e, #d84343);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #ffb3b3;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(255,111,111,0.55),0 0 12px rgba(255,82,82,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: zsaBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes zsaBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.rpmanager {
    background: linear-gradient(90deg, #d4a900, #f9c74f, #ffe082, #fff3b0, #ffe082, #d4a900);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #fff0a8;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(255,224,130,0.55),0 0 12px rgba(249,199,79,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: rpmanagerBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes rpmanagerBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.vladelec {
    background: linear-gradient(90deg, #0b1f3a, #17365d, #28527a, #17365d, #0b1f3a);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #426b94;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(23,54,93,0.65),0 0 12px rgba(11,31,58,0.4),0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: vladelecBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes vladelecBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.zamvladelec {
    background: linear-gradient(90deg, #17191f, #292d36, #414752, #292d36, #17191f);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #555c68;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(65,71,82,0.6),0 0 12px rgba(30,34,42,0.4),0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: zamvladelecBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes zamvladelecBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.servermoscow {
    background: linear-gradient(90deg, #e05a5a, #ff8585, #ffb0b0, #ffd0d0, #ffb0b0, #e05a5a);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #ffc1c1;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(255,133,133,0.55),0 0 12px rgba(224,90,90,0.3),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: servermoscowBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes servermoscowBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.legendarny {
    background: #f57c00;
    color: #ffffff;
    border: 1px solid #ffb74d;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(245,124,0,0.55),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

.uspeshny {
    background: #f48fb1;
    color: #ffffff;
    border: 1px solid #f8bbd0;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(244,143,177,0.55),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

.gs {
    background: linear-gradient(90deg, #0d47a1, #1565c0, #2196f3, #42a5f5, #2196f3, #1565c0, #0d47a1);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #64b5f6;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(33,150,243,0.55),0 0 12px rgba(13,71,161,0.35),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: gsBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes gsBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.zgs {
    background: linear-gradient(90deg, #0d47a1, #1565c0, #1976d2, #42a5f5, #1976d2, #1565c0, #0d47a1);
    background-size: 300% 100%;
    color: #ffffff;
    border: 1px solid #64b5f6;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 5px rgba(33,150,243,0.55),0 0 12px rgba(13,71,161,0.35),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    animation: zgsBanner 4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

@keyframes zgsBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.moder {
    background: #fbc02d;
    color: #ffffff;
    border: 1px solid #ffe082;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(251,192,45,0.55),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

.admin {
    background: #a67c00;
    color: #ffffff;
    border: 1px solid #d4af37;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(166,124,0,0.55),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}

.stadm {
    background: #81d4fa;
    color: #ffffff;
    border: 1px solid #b3e5fc;
    border-radius: 50px;
    display: inline-block;
    padding: 1px 10px;
    height: 20px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin: 1px 3px;
    line-height: 16px;
    box-shadow: 0 0 6px rgba(129,212,250,0.55),0 2px 4px rgba(0,0,0,0.25);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box
}