Bootstrap animation

by Ondrej

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Demo header-->
<section class="pb-5 header text-center">
    <div class="container py-5 text-white">
        <header class="py-5">
            <h1 class="display-4">Bootstrap animated play button</h1>
            <p class="text-light font-italic mb-1">Using css animation and pseudo elements, create a nice animated play button.</p>
            <p class="text-light font-italic">Snippet by
                <a class="text-light" href="https://bootstrapious.com/">
                    <u>Bootstrapious</u>
                </a>
            </p>
        </header>
    </div>


    <div class="text-center">
        <!-- Animated button -->
        <a class="animated-btn text-white" href="#"><i class="fa fa-play"></i></a>
    </div>

</section>

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.animated-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    display: inline-block;
    text-align: center;
    background: #ff3f3f;
    position: relative;
}

.animated-btn::before, .animated-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(255, 63, 63, 0.8);
    animation: ripple-1 2s infinite ease-in-out;
    z-index: -1;
}

.animated-btn::after {
    background: rgba(255, 63, 63, 0.6);
    animation: ripple-2 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes ripple-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
    background: #121618;
}