CSS Play Button Animation Effects

CSS Play button animation effects. Here you can see the pure CSS animation effect applied on a play button and we can use it as the video button on our website.

HTML

<a href="#" class="play-btn" data-vbtype="video" data-autoplay="true"></a>

CSS

.play-btn {
    width: 100px;
    height: 100px;
    background: radial-gradient(#4CAF50 50%, rgba(76, 175, 80, 0.5) 50%);
    display: block;
    transform: rotate(45deg);
    margin: 100px auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 10px 3px #dcdcdc;
    border-radius: 30px;
}
.play-btn::after {
    content: '';
    position: absolute;
    left: 43%;
    top: 38%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transform: rotate(-45deg);
}
.play-btn::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -15%;
    width: 120px;
    height: 120px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation: play-btn 2s;
    animation: play-btn 2s;
    -webkit-animation-direction: forwards;
    animation-direction: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps;
    animation-timing-function: steps;
    opacity: 1;
    border: 5px solid #ffffff;
    border-radius: 30px;
}
.play-btn:hover::after {
    border-left: 15px solid #4CAF50;
    transform: scale(20);
}
.play-btn:hover::before {
    content: '';
    position: absolute;
    left: 43%;
    top: 38%;
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    -webkit-animation: none;
    animation: none;
    border-radius: 0;
    transform: rotate(-45deg);
}
/*-- Animated CSS --*/
@-webkit-keyframes play-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
    }
    @keyframes play-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}