<a href="#" class="to-top">Back to top</a>

body{
  background:#222;
  text-align:center;
  font-size:180%;
  margin:2em;
  font-family: Calibri, arial, sans-serif;
}
.to-top{
  color:white;
  padding-top:1.8em;
  display:inline-block;/* or block */
  position:relative;
  border-color:white;
  text-decoration:none;
  transition:all .3s ease-out;
}
.to-top:before{
  content:'▲';
  font-size:.9em;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-.7em;
  border:solid .13em white;
  border-radius:10em;
  width:1.4em;
  height:1.4em;
  line-height:1.3em;
  border-color:inherit;
  transition:transform .5s ease-in;
}
.to-top:hover{
  color:pink;
  border-color:pink;
}
.to-top:hover:before{
  transform: rotate(360deg);
}