Edit in JSFiddle

.box { width:195px; height:195px; background-color:#52CEC9; padding:50px; 
    box-sizing:border-box; }
.squareCircle { position:absolute; 
    font-size:50px; color:#fff; 
    left:95px; top:70px; 
}
.squareCircle:after { content:' '; width:100px; height:100px; position:absolute; 
    left:-42px; top:-15px; 
    border:1px solid #fff; 
    box-sizing:border-box; 
    border-radius:50%;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    }

.squareCircle:hover:after { border-radius:0px; cursor:pointer; }

<div class="box">
    <div class="squareCircle">
        &rsaquo;
    </div>
</div>