.button {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: 3px solid #1e90ff;
}
.button--play {
    border-radius: 50%;
}
.button--play .button__shape {
    width: 25px;
    height: 75px;
    background: #1e90ff;
    transition: 0.3s ease-in-out;
}
.button--play .button__shape--one {
    -webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
    transform: translateX(5px);
}
.button--play .button__shape--two {
    -webkit-clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
    transform: translateX(4.9px);
}
.button--play.button--active .button__shape--one {
    -webkit-clip-path: polygon(0 15%, 50% 15%, 50% 85%, 0% 85%);
    transform: translateX(0px);
}
.button--play.button--active .button__shape--two {
    -webkit-clip-path: polygon(50% 15%, 100% 15%, 100% 85%, 50% 85%);
    transform: translateX(0px);
}