<div class="pos down-arrow"></div>

* {box-sizing:border-box;transition:all 0.3s;-webkit-transition:all 0.3s;}

body {margin:100px;background-color:#1d1f20;}

.pos {position:relative;margin:0 auto;}

.down-arrow {height:60px;width:60px;border:4px solid #FFF;border-radius:100%;}

.down-arrow:before,.down-arrow:after {content:'';position:absolute;top:26px;width:18px;border:2px solid #FFF;transition:all 0.3s;-webkit-transition:all 0.3s;}

.down-arrow:before {transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);left:9px;}
.down-arrow:after {transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);left:22px;}

.down-arrow:hover {cursor:pointer;border-width:0;}
.down-arrow:hover:before,.down-arrow:hover:after {top:40px;}
.down-arrow:hover:before {left:13px;}
.down-arrow:hover:after {left:26px;}