Pure CSS transitioned footer. Keeps away from content, shows itself when it needs to be seen.
A Pen by Nick Braver on CodePen.
<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> |
//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 |
@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; | |
} |