<div class="userBannerLight admin">
  Администратор
</div>
<div class="userBannerLight moder">
  Модератор
</div>
<div class="userBannerLight user">
  Пользователь
</div>	

/* только для демо */

body {
    font: 15px / 1.4 sans-serif;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
    font-weight: 500;
    color: #0e0e0e;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    background-color: #F6F6F6;
}

.userBannerLight {
    margin: 1em 2em;  
}

/* код баннеров */

.userBannerLight {
    padding: 0.5em 0em;
    width: 120px;
    border: 0;
    color: #fff;
    font-size: .7em;
    font-weight: 500;
    cursor: pointer; /* не обязательно */
    text-align: center;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }        
}

@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}