<div class="chrome-btn">
  <button>ICO</button>
</div>
.chrome-btn
  position: absolute
  top: 50%
  left: 50%
  height: 50px
  width: 50px
  // border: 1px solid
  background: transparent
  transform: translate(-50%,-50%)
  &:after
    content: ""
    position: absolute
    z-index: -1
    height: 100%
    width: 100%
    border-radius: 5px
    transition: all .4s
  &:hover:after
    background: #dfdfdf
  button
    position: absolute
    left: 15%
    top: @left
    height: 100%-@left*2
    width: @height
    border: 0
    border-radius: 50%
    color: white
    outline: 0
    background: #f09300
      
.chrome-btn.active
  left: 50%
  top: @left
  height: 100%-@left*2
  width: @height
  border-radius: 50%
  transform: translate(-50%, -50%)
  
View Compiled
var chromeBtn=document.querySelectorAll('.chrome-btn')
var toggle=function(){
  if(this.className=='chrome-btn')
    this.className='chrome-btn active';
  else
    this.className='chrome-btn';
}
chromeBtn.forEach(function(v){
  v.addEventListener('click', toggle);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.