back to main button

back-to-main-button.markdown

back to main button

CSS only with hover transform effects for the button resize with curved corners. This is the same button that is working on my site. Check it out on any article at https://jamescampbell.us

View the live working version on codepen as well, here is the Pen by James Campbell on CodePen.

License.

index.html

<div class='backwardo'><a href='http://www.jamescampbell.us#latest'>&larr; back to main <i class="fa fa-dot-circle-o"></i></a></div>

style.css

body {
  background-color:black;
}
.backwardo {
	position: relative;
	margin-left: 0;
  margin-right: 0;
  margin: auto;
  text-align: center;
  top: 20px;
}

.backwardo a {
	border: 6px solid rgba(255,255,255,0.40);
	padding: 6px 10px;
	font-family: Arial, sans-serif;
	font-weight:100;
	font-size: 1em;
	color: rgba(255,255,255,0.48);
	border-radius: 16px;
	background-color: transparent;
	letter-spacing: .07em;
	transition: 0.4s linear;
  text-decoration: none;
}

.backwardo a:hover {
border: 2px solid rgba(255,255,255,0.8);
	color: #fff;
	background-color:transparent;
	transition: 0.4s linear;
}