Rank Design

.prem-rank{
    background:linear-gradient(90deg,#1a1a2e,#16213e);
    border-left:4px solid #00dbde;
    border-radius:5px;
    font-family:'Segoe UI',system-ui,sans-serif;
    margin:0px 0;
    height:36px;
    max-width:190px;
    padding:0 14px 0 10px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
    transition:all .4s cubic-bezier(.68,-0.55,.265,1.55);
    box-shadow:0 5px 15px rgba(0,0,0,.2),
               inset 0 1px 0 rgba(255,255,255,.1);
}

/* ADMIN özel */
.prem-rank.admin{
    background:linear-gradient(90deg,#2d0b5f,#1a033a);
    border-left-color:#9d4edd;
}

.prem-rank:hover{
    transform:translateX(8px) scale(1.02);
    border-left-width:6px;
    box-shadow:0 10px 25px rgba(157,78,221,.35),
               inset 0 1px 0 rgba(255,255,255,.2);
}

.rank-text{
    position:relative;
    z-index:2;
    text-shadow:1px 1px 2px rgba(0,0,0,.6);
}

/* ++ kısmı */
.r-level{
    font-size:12px;
    font-weight:900;
    padding:3px 9px;
    border-radius:12px;
    background:linear-gradient(90deg,#9d4edd,#c77dff);
    color:#fff;
    position:relative;
    z-index:2;
    box-shadow:0 0 8px rgba(157,78,221,.6);
}

/* sağ parlama */
.prem-rank:before{
    content:'';
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:38px;
    background:linear-gradient(90deg,transparent,rgba(157,78,221,.18));
    clip-path:polygon(100% 0,100% 100%,0 100%,30% 50%);
    transition:.3s;
}

.prem-rank:hover:before{
    width:48px;
}

/* üst çizgi */
.prem-rank:after{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:2px;
    background:linear-gradient(90deg,#9d4edd,#c77dff);
    transition:.4s;
}

.prem-rank:hover:after{
    width:100%;
}
/* ADMIN */
.prem-rank.admin{
    background:linear-gradient(90deg,#2d0b5f,#1a033a);
    border-left:4px solid #9d4edd;
}

/* MODERATOR */
.prem-rank.mod{
    background:linear-gradient(90deg,#0b3c5f,#06243a);
    border-left:4px solid #00b4d8;
}
.prem-rank.mod .r-level{
    background:linear-gradient(90deg,#00b4d8,#48cae4);
}

/* REGISTERED */
.prem-rank.user{
    background:linear-gradient(90deg,#1f2933,#111827);
    border-left:4px solid #22c55e;
}

/* GUEST */
.prem-rank.guest{
    background:linear-gradient(90deg,#2b2b2b,#1a1a1a);
    border-left:4px solid #9ca3af;
    opacity:.85;
}

<div class="prem-rank admin">
    <span class="rank-text">ADMIN</span>
    <div class="r-level">++</div>
</div>

<div class="prem-rank mod">
    <span class="rank-text">MOD</span>
    <div class="r-level">+</div>
</div>

<div class="prem-rank user">
    <span class="rank-text">USER</span>
    <div class="r-level">-</div>
</div>

<div class="prem-rank guest">
    <span class="rank-text">GUEST</span>
</div>