Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
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;}
}
@JaydenIrwin

This comment has been minimized.

Copy link

@JaydenIrwin JaydenIrwin commented Jan 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment