.buttonContainer
  h1 Just a fancy button..
  a(href='#' class='button' title='Yes, turtles.') I like turtles!

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

body{
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.buttonContainer{
  margin-top:100px;
  text-align:center;
}

h1{
  color:rgba(69, 69, 69, 1);
  line-height:2em;
}

/* BUTTON CSS
------------------------------------------- */

a.button{
  display:inline-block;
  
  font:normal normal 300 1.3em 'Open Sans';
  text-decoration:none; 
  
  color:rgba(28, 190, 131, 1);
  brackground-color:transparent;
  border:1px solid rgba(28, 190, 131, 1);
  border-radius:100px;
  
  padding: .3em 1.2em;
  margin:5px;
      
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, transparent 50%, rgba(28, 190, 131, 1) 50%);
  transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}

a.button:hover{
  color:rgba(255, 255, 255, 1);
  background-color:rgba(28, 190, 131, 1);
  background-position: -100% 100%;
}

// Pure css button animation
// www.ydna.nl