header  
  h1 Lonely links waiting to be hovered
  p clicking on the link will take you to <a href='https://goo.gl/Flh2CZ'>DigitalOcean's website</a>, they have great web hosting plans for web devs ;)
  
  div.advert <a target='_blank' href='https://www.digitalocean.com/?refcode=e8fcd87b1626'>Web Hosting for Web Devs. like you on <b>Digital Ocean</b></a>
  
section
  a.hoverEffect(href='https://goo.gl/Flh2CZ' target='_blank') 1. An Awesome Link
  a.hoverEffect.effect2(href='https://goo.gl/Flh2CZ' target='_blank') 2. An Awesome Link
  a.hoverEffect.effect3(href='https://goo.gl/Flh2CZ' target='_blank') 3. An Awesome Link
  a.hoverEffect.effect4(href='https://goo.gl/Flh2CZ' target='_blank') 4. An Awesome Link
  a.hoverEffect.effect5(href='https://goo.gl/Flh2CZ' target='_blank') 5. An Awesome Link
  
  a.hoverEffect.effect4.attribute(href='https://goo.gl/Flh2CZ' target='_blank') Created By Deepak Kamat <br> <small>www.stramaxon.com - @xxxdepy</small>
  

body {
  font-family:"Lato", "Helvetica", Arial, sans-serif;
  font-size:18px;
  margin:0 auto;
  max-width:620px;
  color:#f1f1f1;
  background-color:#3C6277;
  
  padding:40px 0;
}

div.advert {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  padding:5px 20px;
  background-color:rgba(0,0,0,0.2);
  z-index:1;
  border-top:2px solid rgba(0,0,0,0.2);
}
div.advert  a {
  text-decoration:none;
  letter-spacing:0.125em;
  font-size:80%;
}



header {
  text-align:center;
}
header a {
  color:inherit;
}
header p {
  font-weight:100;
  font-size:90%;
  opacity:0.5;
}

section {
  padding:60px 0;
  text-align:center;
}
/* Hover Link CSS */
.hoverEffect {
  margin:15px 0;
  font-size:2em;
  font-weight:600;
  color:#fff;
  color:#FFE476;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.25rem;
  
  position:relative;
  display:inline-block;
  padding:20px 0;
  
  transition:all 0.4s ease-in-out;
}

.hoverEffect:after, .hoverEffect:before {
  content:"";
  height:4px;
  background-color:#FFE476;
  background-color:transparent;
  position:absolute;
  display:block;
  width:10%;

  transition:all 0.4s ease-in-out;
}
.hoverEffect:before {
  top:0;
  right:0;
}
.hoverEffect:after {
  bottom:0;
  left:0;
}
.hoverEffect:hover:after , 
.hoverEffect:hover:before {
  background-color:#FFE476;
  width:100%;
}

/* Effect 2 */
.hoverEffect.effect2:before, 
.hoverEffect.effect2:after {
  right:0;
  left:0;
  margin:0 auto;
}


/* Effect 3 */
.hoverEffect.effect3:before, 
.hoverEffect.effect3:after {
  right:0;
  left:0;
}
.hoverEffect.effect3:before {
  transform:rotate(25deg) translate(0, -45px);
}

.hoverEffect.effect3:after {
 transform:rotate(-25deg) translate(0, 45px);
}

.hoverEffect.effect3:hover:before, 
.hoverEffect.effect3:hover:after {
  transform:rotate(0deg) translate(0, 0);
}

/* Effect 4 */
.hoverEffect.effect4:before, 
.hoverEffect.effect4:after {
  right:0;
  left:0;
  margin:0 auto;
}

.hoverEffect.effect4:before {
  transform:scale(0.5) translate(0px, 200px);
}

.hoverEffect.effect4:after {
 transform:scale(0.5) translate(0px, -200px);
}

.hoverEffect.effect4:hover:before,
.hoverEffect.effect4:hover:after {
  transform:scale(1) translate(0px, 0px);
}


/* Effect 5 */
.hoverEffect.effect5:before, 
.hoverEffect.effect5:after {
  right:0;
  left:0;
  margin:0 auto;
}

.hoverEffect.effect5:before,
.hoverEffect.effect5:after{
  transform:scale(1) translate(0px, -600px);
  width:100%;
}


.hoverEffect.effect5:hover:before,
.hoverEffect.effect5:hover:after {
  transform:scale(1) translate(0px, 0px);
}

/* Attribute */
a.hoverEffect.attribute {
  font-size:0.8em;
  color:#fff;
}

a.hoverEffect.attribute:hover:after,
a.hoverEffect.attribute:hover:before {
  height:1px;
  background-color:#fff;
}

a.hoverEffect.attribute small {
  font-size:0.5em;
}