index.html

<div class="main">
  <h1>Liquid Filled Button</h1>
  <h2>Make a neat hover effect with just a background image and some simple CSS</h2>
  
  <h2>Based on the design from <a href="http://splatoon.nintendo.com/">Splatoon.nintendo.com</a></h2>
  
  <a class="btn btn-invert teal" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <h1>How it's Done</h1>
  <p>All you have to do is set the background image to an image that looks like a wavey liquid, in this case I am using the following image that I found on the site for Nintendo's new game Splatoon.</p>
  
  <img src="http://splatoon.nintendo.com/assets/img/nav-bg-fill-turq.png?1429563994" alt="liquid" />
  
  <p>For the best results, make sure the image can repeat on the X axis so that you can make it look like the liquid is moving when the button is hovered.</p>
  
  <div class="waves teal"></div>
  
  <p>Start with the background image below the visible area of the button. When the user hovers it, change the background position on both the X and Y axis, this will not only make it look like the button is filling up with liquid, it will also make it look as if there is a ripple or wave effect as it fills.</p>
  
  <h1>Here it is with the effect slowed down</h1>
  <a class="btn btn-invert teal slow" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <p>If you cange the X value of the background position when the button is being hovered, you can change how much ripple you will see.</p>
  
  <h1>Easy to Change the Colors</h1>
  <h2>Just change the background image.</h2>
  
  <a class="btn btn-invert green" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn btn-invert orange" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn btn-invert blue" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn btn-invert purple" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn btn-invert teal" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <div class="dark">
    <h1>Looks Good in the Dark</h1>
  <h2>Change the text, border and background color and it looks good on dark backgrounds too.</h2>
    <a class="btn blue" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn purple" href="http://splatoon.nintendo.com/">Hover Me</a>
  
  <a class="btn teal" href="http://splatoon.nintendo.com/">Hover Me</a>
  </div>
  
  <h1>Thanks for Reading!</h1>
  <h2>All Assets from <a href="http://splatoon.nintendo.com/">Splatoon.nintendo.com</a></h2>
  
  <a class="btn btn-invert blue" href="http://splatoon.nintendo.com/">Check Out Splatoon</a>
</div>

Liquid Filled Buttons.markdown

Liquid Filled Buttons ('-' * 21) A simple way to make a neat looking button link.

A Pen by Scott Berg on CodePen.

License.

style.css

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 12px;
  background: #757575;
}

.btn {
  display: inline-block;
  padding: 20px 50px;
  margin: 50px 10px;
  overflow: hidden;
  
  color: #FFF;
  font-weight: 700;
  font-size: 1.5em;
  text-decoration: none;
  
  border: 4px solid #FFF;
  background-color: rgba(0,0,0,.34);
  background-position: 0 -50%;
  background-repeat: repeat-x;
  border-radius: 100px;
  
  -webkit-box-shadow: inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
  
  transition: background-position .75s ease;
}

.slow {
  transition: background-position 3s ease;
}

.btn-invert {
  border: solid 4px #000;
  color: #000;
  background-color: rgba(150,150,150,.25);
  
  -webkit-box-shadow: inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
  -moz-box-shadow:    inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
  box-shadow:         inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
}

.btn:hover {
  background-position: 100% 50%;
}

/* Classes for background image colors */

.green {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav/nav-bg-fill-general.png?1429022065');
}

.orange {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav-bg-fill-orange.png?1429563994');
}

.blue {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1429563994');
}

.purple {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav-bg-fill-purple.png?1429563994');
}

.pink {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav-bg-fill-pink.png?1429563994');
}

.teal {
  background-image: url('http://splatoon.nintendo.com/assets/img/nav-bg-fill-turq.png?1429563994');
}

/* Presentation Styles */

.main {
  position: relative;
  width: 70%;
  margin: 50px auto;
  padding: 50px;
  background-color: #FFF;
  text-align: center;
  overflow: hidden;
  border-radius: 25px;
  
  border: solid 4px #000;
  
  -webkit-box-shadow: inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
  -moz-box-shadow:    inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
  box-shadow:         inset 4px 4px 0px 0px rgba(50, 50, 50, 0.35);
}

h1 {
  margin: 35px 20px 20px 20px;
  font-weight:700;
  font-size: 3em;
}

h2 {
  font-size: 2em;
  line-height: 1.5em;
}

p {
  font-size: 2em;
  width: 70%;
  margin: 15px auto;
  text-align: left;
  line-height: 1.5em;
}

img {
  margin: 25px auto;;
}

.waves {
  height: 100px;
  width: 70%;
  margin: 25px auto;
  background-repeat: repeat-x;
  background-position: 0 0;
  
  -webkit-animation-name: wave;
   -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
   animation-name: wave;
   animation-duration: 10s;
   animation-iteration-count: infinite;
}

.dark {
  width: 80%;
  margin: 25px auto 50px auto;
  padding: 25px;
  border-radius: 25px;
  background-color: #424242;
  color: #FFF;
  
  border: 4px solid #000;
  
  -webkit-box-shadow: inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         inset 4px 4px 0px 0px rgba(50, 50, 50, 0.75);
}

@-webkit-keyframes wave {
    from {background-position: 0 0;}
    to {background-position: 100% 0;}
}

@keyframes wave {
    from {background-position: 0 0;}
    to {background-position: 100% 0;}
}

Very cool! Too bad the images are no longer hosted, I can't try it.