.btn-tg {
    background: #1a8ad5;
    border-radius: 30px;
    padding: 13px 24px;
    vertical-align: middle;
}
.btn-tg:hover {
    background: #1c93e3;
}
.btn-shine {
    border: none;
    position: relative;
    overflow: hidden;
}
.btn-shine:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        100deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
}
@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}
.btn-shine:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 5s infinite linear; /* Animation */
}

.btn-primary-pulse {
    background: #0d6efd;
    border:1px solid #0d6efd;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: primary-pulse 2s infinite;
    -webkit-animation: primary-pulse 2s infinite;
    animation: primary-pulse 2s infinite;
}

@keyframes primary-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(13, 110, 253, 0);
    }
}

.btn-success-pulse {
    background: #198754;
    border:1px solid #198754;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: success-pulse 2s infinite;
    -webkit-animation: success-pulse 2s infinite;
    animation: success-pulse 2s infinite;
}

@keyframes success-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(25, 135, 84, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(25, 135, 84, 0);
    }
}

.btn-danger-pulse {
    background: #dc3545;
    border:1px solid #dc3545;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: danger-pulse 2s infinite;
    -webkit-animation: danger-pulse 2s infinite;
    animation: danger-pulse 2s infinite;
}

@keyframes danger-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(220, 53, 69, 0);
    }
}

.btn-warning-pulse {
    background: #ffc107;
    border:1px solid #ffc107;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: warning-pulse 2s infinite;
    -webkit-animation: warning-pulse 2s infinite;
    animation: warning-pulse 2s infinite;
}

@keyframes warning-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(255, 193, 7, 0);
    }
}

.btn-secondary-pulse {
    background: #6c757d;
    border:1px solid #6c757d;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: secondary-pulse 2s infinite;
    -webkit-animation: secondary-pulse 2s infinite;
    animation: secondary-pulse 2s infinite;
}

@keyframes secondary-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 117, 125, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(108, 117, 125, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(108, 117, 125, 0);
    }
}

.btn-info-pulse {
    background: #0dcaf0;
    border:1px solid #0dcaf0;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: info-pulse 2s infinite;
    -webkit-animation: info-pulse 2s infinite;
    animation: info-pulse 2s infinite;
}

@keyframes info-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 202, 240, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(13, 202, 240, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(13, 202, 240, 0);
    }
}

.btn-dark-pulse {
    background: #212529;
    border:1px solid #212529;
    color: #fff;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: dark-pulse 2s infinite;
    -webkit-animation: dark-pulse 2s infinite;
    animation: dark-pulse 2s infinite;
}

@keyframes dark-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 37, 41, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(33, 37, 41, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(33, 37, 41, 0);
    }
}

.btn-light-pulse {
    background: #fff;
    border:1px solid #fff;
    color: #000;
    padding:1rem 2rem;
    border-radius: 0.5rem;
    font-size:1rem;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: light-pulse 2s infinite;
    -webkit-animation: light-pulse 2s infinite;
    animation: light-pulse 2s infinite;
}

@keyframes light-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
    }
}