Liquid Filled Buttons ('-' * 21) A simple way to make a neat looking button link.
A Pen by Scott Berg on CodePen.
<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;} | |
} |
Very cool! Too bad the images are no longer hosted, I can't try it.