CSS round OK button

by leftstick

HTML

<button class="round-button">OK</button>

CSS

.round-button {
    position: relative;
    display:block;
    width:50px;
    height:50px;
    line-height: 38px;
    border: 6px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size: 12px;
    font-weight:bold;
    transition: all 0.1s ease 0s;
}

.round-button:after {
    content: "";
    display: block;
    position: absolute;
    width: 42px;
    height: 42px;
    top: 0;
    left: 0;
    background: #BDBDBD;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s
}

.round-button:active:after {
    opacity: 1;
    transition: 0s;
}

.round-button:hover {
    border: 4px solid #f5f5f5;
    line-height: 42px;
}

.hint{
  position: absolute;
  right: -25px;
  top: 0;
  color: #000;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.hint.move{
  opacity: 0;
  top: -25px;
}

JavaScript

document
.querySelector('.round-button')
.addEventListener('click', function(e){
    var span = document.createElement('span');
    span.innerText = '+1';
    span.classList.add('hint');
    e.target.appendChild(span);
    setTimeout(function(){
        span.classList.add('move');
        setTimeout(function(){
            e.target.removeChild(span);
        }, 301);
    }, 30);
}, false);