Набор чёрных кнопок (разные эффекты)1

<div class="btn-demo">
    <button class="btn btn-solid">Solid</button>
    <button class="btn btn-outline">Outline</button>
    <button class="btn btn-slide">Slide</button>
    <button class="btn btn-glow">Glow</button>
    <button class="btn btn-press">Press</button>
    <button class="btn btn-minimal">Minimal</button>
</div>

.btn-demo {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* BASE */
.btn {
    padding: 14px 22px;
    font-size: 15px;
    border-radius: 10px;
    cursor: pointer;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}

/* 1️⃣ SOLID */
.btn-solid:hover {
    background: #000;
}

/* 2️⃣ OUTLINE */
.btn-outline {
    background: transparent;
    color: #111;
}

.btn-outline:hover {
    background: #111;
    color: #fff;
}

/* 3️⃣ SLIDE EFFECT */
.btn-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 0;
}

.btn-slide span,
.btn-slide {
    z-index: 1;
}

.btn-slide:hover::before {
    transform: translateX(0);
}

/* 4️⃣ SOFT GLOW */
.btn-glow:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
    transform: translateY(-2px);
}

/* 5️⃣ PRESS */
.btn-press:hover {
    transform: translateY(-1px);
}

.btn-press:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}

/* 6️⃣ MINIMAL */
.btn-minimal {
    background: transparent;
    color: #111;
    border: none;
}

.btn-minimal::after {
    content: "";
    display: block;
    height: 2px;
    background: #111;
    width: 0;
    transition: width .3s ease;
    margin-top: 4px;
}

.btn-minimal:hover::after {
    width: 100%;
}