A Pen by Nick Braver.

index.html

<section>
  <h1>Classy Footer</h1>
  <h3>Hover over the circle below</h3>
</section>
<div id="button"></div>
<div class="footer">
	<div id="button"></div>
<div id="container">
<div id="cont">
<div class="footer_fifths">
	   <h3>Classy footer text</h3>
</div>
</div>
</div>
</div>

Pure-CSS-Classy-Footer.markdown

Pure CSS Classy Footer

Pure CSS transitioned footer. Keeps away from content, shows itself when it needs to be seen.

A Pen by Nick Braver on CodePen.

License.

script.js

//Just a pure CSS classy footer. Keep it out of the way of your content until it needs to be seen.

Copyright 2014 Nick Braver

style.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight:300;
  background-color:lightblue;
  color:#FFF;
}
section{
  text-align:center;
}
.footer #button{
	width:35px;
	height:35px;
	border: #727172 12px solid;
	border-radius:35px;
	margin:0 auto;
	position:relative;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.footer #button:hover{
	width:35px;
	height:35px;
	border: #3A3A3A 12px solid;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	position:relative;
}
.footer {
	bottom:0;
	left:0;
	position:fixed;
    width: 100%;
    height: 2em;
    overflow:hidden;
    margin:0 auto;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	z-index:999;
}
.footer:hover {
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	height: 10em;
}
.footer #container{
	margin-top:5px;
	width:100%;
height:100%;
  position:relative;
  top:0;
  left:0;
	background: #3A3A3A;
}
.footer #cont{
  position:relative;
  top:-45px;
  right:190px;
	width:150px;
	height:auto;
	margin:0 auto;
}
.footer_fifths{
	width:500px;
	float:left;
  text-align:center;
}
.footer h3{
	font-family: 'Helvetica';
	font-size: 30px;
	font-weight: 100;
	margin-top:70px;
	margin-left:40px;
}
.logocircle{
	color:#FFFFFF;
	text-overflow:clip;
	font-size:30px;
	font-weight:400;
	font-style:normal;
	font-variant:normal;
	position:relative;
	top:85px;
	right:20px;
	z-index:1000;
}