border-radius animation

css animate border-radius to show active state

HTML

<div>
    Play
</div>

CSS

div {
    font-size: 18px;
    font-family: sans-serif;
    display: inline-block;
    padding: 40px;
    margin: 30px;
    background: #222;
    color: #999;
    cursor: default;

    -webkit-border-radius: 0;
     -moz-border-radius: 0;
      -ms-border-radius: 0;
          border-radius: 0;
  transition: border-radius .7s cubic-bezier(0.075, 0.82, 0.165, 1);

} 

div.active {
    color: #fff;
  -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
      -ms-border-radius: 60px;
          border-radius: 60px;
}

JavaScript

var div = document.querySelector('div');
div.addEventListener('click', function () {
    div.classList.toggle('active');
});