A CodePen by Chris Coyier. Animated back-to-top button - I used this form constructed with CSS3 as a separator between different sections of a one-pager and discovered that I could use a litte hover-effect to make it a back-to-top button.

index.html

<a href="#top" class="diamond-wrap"><span class="diamond">back to top</span></a>

style.css

.diamond-wrap {
  position: absolute;
  left: 50%;
  top: 30px;
  padding: 0 10px 30px 10px;
}

.diamond {
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-bottom-color: #D4CEAC;
	position: relative;
	display: block;
	text-indent: -9999px;
  transition: all 0.4s ease;
}

.diamond-wrap:hover .diamond {
  border-bottom-color: #806868;
  transform: translateY(-20px);
}

.diamond:after {
	content: '';
	position: absolute;
	left: -15px;
	top: 15px;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-top-color: #D4CEAC;
}

.diamond-wrap:hover .diamond:after {
	content: '';
	position: absolute;
	top: 0;
	border: 15px solid transparent;
	border-bottom-color: #806868;
}