<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.