Code: CSS Button with Water Drop Effect

This is an amazing effect for the buttons. With the aid of CSS3, now you can change the boring buttons to more interactive ones. Here, it seems that a water droplet drops on the button and creates a wave. Enjoy it!
<!-- this script got from www.cssfreecode.com -->
<html><head>
<style>@import url(http://cssfreecode.com/view/files/1116_font.css);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font-family: Roboto, sans-serif;
  background: #2196F3;
  font-size: 16pt;
  color: #6ab8f7;
  font-weight: 200;
  padding: 2em;
}

.col {
  display: inline-block;
  vertical-align: top;
}

main {
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  position: relative;
  display: inline-block;
  left: 50%;
}
main header {
  color: #fff;
  text-align: center;
  margin: 1em;
}
main header h1 {
  font-size: 1.25em;
  margin: 0.25em;
}
main header a {
  color: #6ab8f7;
  text-decoration: none;
}

.button {
  position: relative;
  margin: 1em;
  font-weight: 100;
  padding: 1em 1.25em;
  text-align: center;
  width: 200px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.button.raised {
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  background: #0c84e4;
  box-shadow: 0px 1px 1px #085a9b;
}
.button.raised:active {
  background: #0c7dd8;
  box-shadow: 0px 1px 1px #063e6b;
}

span {
  font-weight: 400;
}

input[type="checkbox"].toggle {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
}
input[type="checkbox"].toggle:focus {
  outline: 0;
}

.anim {
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.anim:before {
  position: relative;
  content: '';
  display: block;
  margin-top: 100%;
}
.anim:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}

.clickable .toggle:checked + .anim {
  -moz-animation: anim-in 0.75s;
  -webkit-animation: anim-in 0.75s;
  animation: anim-in 0.75s;
}
.clickable .toggle:checked + .anim:after {
  -moz-animation: anim-in-pseudo 0.75s;
  -webkit-animation: anim-in-pseudo 0.75s;
  animation: anim-in-pseudo 0.75s;
}
.clickable .toggle:not(:checked) + .anim {
  -moz-animation: anim-out 0.75s;
  -webkit-animation: anim-out 0.75s;
  animation: anim-out 0.75s;
}
.clickable .toggle:not(:checked) + .anim:after {
  -moz-animation: anim-out-pseudo 0.75s;
  -webkit-animation: anim-out-pseudo 0.75s;
  animation: anim-out-pseudo 0.75s;
}

.hoverable:hover > .anim {
  -moz-animation: anim-out 0.75s;
  -webkit-animation: anim-out 0.75s;
  animation: anim-out 0.75s;
}
.hoverable:hover > .anim:after {
  -moz-animation: anim-out-pseudo 0.75s;
  -webkit-animation: anim-out-pseudo 0.75s;
  animation: anim-out-pseudo 0.75s;
}

@-webkit-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@-moz-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@-ms-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@-webkit-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@-moz-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@-ms-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
@keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.25);
  }
  100% {
    background: transparent;
  }
}
</style></head><body>

<main>
  <section class="col">
    <div class="button raised clickable">
      <input class="toggle" type="checkbox"/>
      <div class="anim"></div><span>Click!</span>
    </div>
    <div class="button raised hoverable">
      <div class="anim"></div><span>Hover!</span>
    </div>
  </section>
</main>

</body></html>
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>
If you don't know how to use this code or need more information Click here!

	You can leave comments once you sign in/up.
CSS Best Codes

Code: CSS Button with Water Drop Effect

You can leave comments once you sign in/up.

Links
