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