.hover-btn {
    position: relative;
    z-index: 100 !important;
    cursor: pointer;
}

.hover-btn .tn-atom {
    position: relative;
}

.hover-btn .tn-atom::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: #222727;
    transition: inset 0.3s;
}

@media(hover: hover) {
    .hover-btn:hover .tn-atom::after {
        inset: -6px;
    }
}

.hover-btn-2 {
    z-index: 100 !important;
    cursor: pointer;
}

.hover-btn-2 .tn-atom {
    position: relative;
}

.hover-btn-2 .tn-atom::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 1.5px solid #222727;
    transition: inset 0.3s;
}

@media(hover: hover) {
    .hover-btn-2:hover .tn-atom::after {
        inset: -6px;
    }
}