Untitled

dabblet.css

@import url(//fonts.googleapis.com/css?family=Oswald:300);
@import "compass/reset";
@import "compass/css3";

html, body, .wrapper { height: 100%; }
body {
  background: #28B2CB url(https://db.tt/knbF8GaS) center center no-repeat;
  @include background-size(cover);
  font-family: 'Oswald', sans-serif;
}
.wrapper {
  background-image: url(https://db.tt/xO15SiJ0);
  width: 100%;
}
.holder {
  position: absolute;
  top: 50%;
  height: 300px;
  width: 100%;
  margin-top: -170px;
}
a.animBtn:link, a.animBtn:visited {
    position: relative;
    display: block;
    width: 180px;
    margin: 30px auto 0;
    padding: 14px 15px;
    border: 2px solid #fff;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    text-shadow: 0 0 1px rgba(0,0,0,0.2), 0 1px 0 rgba(0,0,0,0.2);
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    &;:after {
      content: "";
      position: absolute;
      background: none repeat scroll 0 0 #fff;
      height: 0%;
      left: 50%;
      top: 50%;
      width: 100%;
      z-index:-1;
      -webkit-transition: all .3s ease 0s;
         -moz-transition: all .3s ease 0s;
           -o-transition: all .3s ease 0s;
              transition: all .3s ease 0s;
    }
    &;:hover {
      color: #333;
      text-shadow: none;
      &;:after {
        height: 420%;
      }
    }
}
a.animBtn {
  &;.themeA:after {
    @include transform(translateX(-50%) translateY(-50%) rotate(-45deg));
  }
  &;.themeB:after {
    @include transform(translateX(-50%) translateY(-50%) rotate(45deg));
  }
  &;.themeC:after {
    opacity: .5;
    @include transform(translateX(-50%) translateY(-50%));
  }
  &;.themeC:hover:after {
    height: 140%; opacity: 1;
  }
  &;.themeD:after {
    width: 0%;
    border-radius: 50%;
    opacity: .5;
    @include transform(translateX(-50%) translateY(-50%));
  }
  &;.themeD:hover:after { height: 450%; width: 110%; opacity: 1; }
}

dabblet.html

<div class="wrapper">
  <p class="holder">
    <a href="#" class="animBtn themeA">Discover More A</a>
    <a href="#" class="animBtn themeB">Discover More B</a>
    <a href="#" class="animBtn themeC">Discover More C</a>
    <a href="#" class="animBtn themeD">Discover More D</a>
  </p>
</div>

dabblet.js

var file, 
    render;

document.getElementById("upload_button").addEventListener("click", function(){
  document.getElementById("background_input").click();
}, false);

document.body.addEventListener("drop", function(ev){
  file = ev.dataTransfer.files[0];
  if(!file.type.match("image.*")) {
    alert("This file isn't image or it's unsupported format");
    return;
  }
  reader = new FileReader();
  reader.addEventListener("load", (function(theFile) {
    return function(e) {
      document.body.style.backgroundImage = "url('" + e.target.result + "')";
		};
	})(file), false);
  reader.readAsDataURL(file);
}, false);

document.getElementById("background_input").addEventListener("change", function(ev){
  file = ev.target.files[0];
  if(!file.type.match("image.*")) {
    alert("This file isn't image or it's unsupported format");
    return;
  }
  reader = new FileReader();
  reader.addEventListener("load", (function(theFile) {
    return function(e) {
      document.body.style.backgroundImage = "url('" + e.target.result + "')";
		};
	})(file), false);
  reader.readAsDataURL(file);
}, false);

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}