.btn-site {
    font-size: 13px;
    letter-spacing: 4.8px;
    display: inline-flex;
    align-items: center;
    transition: 0.4s ease-in-out;
    background-color: transparent;
    border: none;
    outline: none;
    text-transform: uppercase;
}

.btn-site span {
    width: 20px;
    height: 1px;
    margin-right: 15px;
    transition: 0.4s ease-in-out;
}

.btn-site:hover span {
    width: 30px;
}

.btn-coffee {
    color: var(--coffee);
}

.btn-coffee span {
    background-color: var(--coffee);
}

.btn-coffee:hover {
    color: var(--coffee4);
}

.btn-coffee:hover span {
    background-color: var(--coffee4);
}


.btn-pink6 {
    color: var(--pink6);
}

.btn-pink6 span {
    background-color: var(--pink6);
}

.btn-beige5 {
    color: var(--beige5);
}

.btn-beige5 span {
    background-color: var(--beige5);
}

.btn-green6 {
    color: var(--green6);
}

.btn-green6 span {
    background-color: var(--green6);
}

.btn-blue6 {
    color: var(--blue6);
}

.btn-blue6 span {
    background-color: var(--blue6);
}
.btn-green5 {
    color: var(--green5);
}

.btn-green5 span {
    background-color: var(--green5);
}
.btn-coffee8 {
    color: var(--coffee8);
}

.btn-coffee8 span {
    background-color: var(--coffee8);
}
.btn-gray {
    color: var(--gray);
}

.btn-gray span {
    background-color: var(--gray);
}
.btn-pink3 {
    color: var(--pink3);
}

.btn-pink3 span {
    background-color: var(--pink3);
}
.btn-pink5 {
    color: var(--pink5);
}

.btn-pink5 span {
    background-color: var(--pink5);
}
.btn-blue {
    color: var(--blue);
}

.btn-blue span {
    background-color: var(--blue);
}
.btn-orange {
    color: var(--orange);
}

.btn-orange span {
    background-color: var(--orange);
}
.btn-white {
    color: #ffffff;
}

.btn-white span {
    background-color: #ffffff;
}