.btn-sns {
    display: grid;
    place-items: center;
    position: relative;
    margin: 0.5rem;
    width: 50px;
    height: 35px;
    background-color: #ff0154;
    color: #fff;
    transform: skew(25deg);
    text-decoration: none;
    transition: all 0.5s;
}

.btn-sns::before,
.btn-sns::after {
    position: absolute;
    transition: all 0.5s;
    content: '';
}

.btn-sns::before {
    top: 5px;
    left: -10px;
    width: 10px;
    height: 100%;
    background-color: #54001c;
    transform: skewY(-45deg);
}

.btn-sns::after {
    left: -5px;
    bottom: -10px;
    width: 100%;
    height: 10px;
    background-color: #950131;
    transform: skewX(-45deg);
}

.btn-sns:hover {
    transform: skew(25deg) translateY(-5px);
}

.btn-twitter:hover {
    background-color: #359BF0;
}

.btn-facebook:hover {
    background-color: #4064AC;
}

.btn-pinterest:hover {
    background-color: #B83026;
}

.btn-sns:active {
    transform: skew(25deg) translate(-7px, 7px);
    box-shadow: -3px 3px 3px rgba(0, 0, 0, .7);
}

.btn-sns:active::before {
    top: 2px;
    left: -3px;
    width: 3px;
}

.btn-sns:active::after {
    left: -2px;
    bottom: -3px;
    height: 3px;
}
.sns_bt {
    display: flex;
    position: absolute;
    bottom: 15%;
    right: 10%;
}
.fa-twitter:before {
    content: "\f099";
}
.fa-facebook-f:before {
    content: "\f39e";
}
.fa-pinterest-p:before {
    content: "\f231";
}