<div class="arrow-button">
<div class="arrow-container">
<i class="arrow"></i>
</div>
<div class="arrow-bg"></div>
</div>
body{
background: #263238;
display:flex;
justify-content:center;
}
.arrow-button{
width: 100px;
height: 100px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.arrow-container{
width: 60px;
height: 60px;
background: white;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
display: flex;
align-items:center;
justify-content:center;
}
.arrow-container:before{
width: 52px;
height: 52px;
content: "";
border: 2px solid #bbb;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
}
.arrow{
color: #006064;
display:block;
height: 15px;
width: 15px;
border: 1px solid #aaa;
border-width: 3px 3px 0 0;
transform: rotate(45deg);
}
.arrow-bg{
width: 80px;
height: 80px;
background: white;
opacity: 0.5;
border-radius: 50%;
position: absolute;
cursor:pointer;
transition: all 1s;
opacity: 0;
transform: scale3d(1, 1, 1);
z-index:1;
}
.arrow-bg:hover{
transform: scale3d(1.2, 1.2, 1.2);
opacity: .4;
}
This Pen doesn't use any external JavaScript resources.