Untitled

dabblet.css

div {
    display: inline-block;   
    border:none;
    border-radius: 100px;
    padding: 10px;
    cursor: pointer;

    
    box-shadow: inset rgba(255,255,255,1) 0 0 10px;
    
    background-color: hsla(45,100%,50%,1);
  
    background-position: center center;
    
    transition: all .6s ease-in-out;
}

#dream1 { padding: 20px; background-image:-moz-element(#now);  }
#dream2 { padding: 30px; background-image:-moz-element(#dream1); }
#dream3 { padding: 40px; background-image:-moz-element(#dream2); }
#dream4 { padding: 50px; background-image:-moz-element(#dream3); }
#dream5 { padding: 60px; background-image:-moz-element(#dream4); }
#dream6 { padding: 70px; background-image:-moz-element(#dream5); }


div:hover {
    background-color: hsla(200,100%,50%,1);
    transform: rotate(360deg);
}

dabblet.html

<div id="now"></div>
<div id="dream1"></div>
<div id="dream2"></div>
<div id="dream3"></div>
<div id="dream4"></div>
<div id="dream5"></div>
<div id="dream6"></div>

settings.json

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