css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <button class="btn-cake">
    <svg viewBox="0 0 495 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
      <title>cake-icon</title>
      <desc>Created with Sketch.</desc>
      <defs></defs>
      <g id="cake-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <circle id="plate" stroke="#000000" fill="#FFFFFF" cx="248" cy="248" r="189"></circle>
          <g id="logo-979f1df73b8f6d19a9b83675590e8487" transform="translate(138.000000, 123.000000)" fill="#F261A2" fill-rule="nonzero">
              <path d="M112.667212,94 C117.653849,94 122,78.075 122,65.075 C122,59.225 120.26154,55 118.157087,55 C113.582192,55 108.000819,66.7 108.000819,80.025 C107.95507,87.825 109.830777,94 112.667212,94 Z" id="Shape"></path>
              <path d="M211.88506,154.160795 C197.205016,186.279143 192.559433,190.821132 190.329553,190.496704 C186.194984,189.847848 184.89422,184.657004 182.617884,176.221883 C190.561832,163.244772 206.542639,146.698956 206.542639,116.527175 C206.542639,107.11877 204.405671,93.1683762 200.364013,93.1683762 C192.327154,93.1683762 167.194547,152.538656 160.783642,168.435616 L161.015921,159.676067 C168.123664,138.263835 210.444929,30.8318996 210.444929,8.44638417 C210.444929,3.90439553 209.144166,0.335690181 207.471756,0.0112624219 C202.268702,-0.962020856 173.837732,61.3281089 161.015921,116.527175 C157.903381,129.828713 154.372737,142.898517 152.932606,157.7295 C147.961832,169.640634 139.924973,186.603571 134.025082,186.603571 C130.819629,186.603571 129.147219,180.115016 128.078735,172.653177 C127.474809,164.866911 127.846456,155.782934 128.91494,150.267662 C154.651472,82.1378324 157.717557,53.5418427 158.553762,22.7212056 C158.646674,18.5036447 158.182116,10.7173785 156.184515,10.7173785 C152.421592,10.7173785 141.132824,40.8891601 130.726718,76.2517859 C124.222901,98.173833 119.391494,127.696759 118.044275,156.895257 C113.30578,166.442703 106.755507,184.008149 100.623337,184.008149 C95.1880044,184.008149 93.3762268,176.870738 94.3517993,163.5692 C99.3225736,154.160795 111.0759,125.286724 111.0759,109.065336 C111.0759,101.927926 107.870447,99.9813591 105.872846,99.9813591 C100.344602,99.9813591 90.1707743,123.340158 85.8968375,152.399616 C71.7278081,178.863651 70.4270447,178.863651 67.9648855,180.48579 C66.5247546,181.459074 64.9917121,176.268229 65.1310796,172.375096 C65.2704471,164.913258 65.9672846,159.722414 75.2119956,131.821626 C76.512759,127.928493 78.8820065,120.791083 78.8820065,115.275811 C78.8820065,110.733822 77.5812432,105.867406 76.7450382,102.2987 C76.3733915,101.000989 75.2119956,93.214723 74.282879,93.214723 C72.8427481,93.214723 69.9160305,99.7032782 68.7081788,102.2987 L42.321265,159.027211 L42.0889858,158.378356 C44.6905125,145.725673 53.0990185,119.447025 53.0990185,105.172203 C53.0990185,96.7370815 51.4266085,90.2485264 48.2211559,90.2485264 C40.5094875,90.2485264 19.4185387,147.996668 13.6115594,164.542483 C13.2399128,165.515767 11.8462377,169.733327 11.2423119,169.733327 C10.7777535,169.733327 10.4061069,167.462333 10.4061069,166.813478 C10.4061069,160.000495 12.5430752,154.80965 13.8438386,149.943234 C15.6091603,142.805823 18.210687,136.966124 20.3476554,130.153141 C21.7877863,125.611152 25.1326063,115.878319 25.1326063,109.389764 C25.1326063,102.576781 21.6019629,102.576781 19.7901854,101.927926 C12.6824427,99.3325036 0.0929116685,142.805823 0,174.599744 C0,186.279143 1.67241003,211.584508 7.34002181,211.584508 C9.47699019,211.584508 11.1494002,206.718092 12.4501636,202.500531 C18.0248637,183.683721 24.668048,164.218055 30.8002181,146.374529 C31.6364231,144.103534 34.2379498,136.317268 35.4458015,136.317268 C35.9103599,136.317268 36.2820065,137.290551 36.2820065,138.588262 C36.2820065,139.561546 35.8174482,142.156968 35.585169,142.805823 C27.8270447,174.924172 24.9932388,189.847848 25.1326063,199.3026 C25.225518,207.088867 27.5018539,212.928566 30.3356598,212.928566 C34.3773173,212.928566 38.6512541,199.627028 41.3456925,192.489617 L60.2067612,145.076818 L60.4390403,145.725673 C57.465867,159.027211 51.6588877,182.061582 51.6588877,198.28297 C51.6588877,207.691375 54.1675027,217.09978 57.6981461,217.09978 C63.4122137,217.09978 76.7450382,188.920912 83.9456925,173.34838 C83.8992366,174.970518 83.8527808,176.54631 83.8527808,178.168449 C83.8527808,194.714265 87.0582334,216.775353 94.0266085,216.775353 C102.388659,216.775353 112.005016,191.516334 117.626172,173.580114 C117.672628,192.582311 119.623773,215.106867 128.171647,215.106867 C136.580153,215.106867 145.685496,192.675005 152.235769,174.460703 C152.468048,185.30586 153.722356,210.564878 157.392366,210.564878 C159.622246,210.564878 160.690731,205.698462 161.666303,200.832045 C163.431625,192.721351 165.336314,185.259513 167.937841,178.770958 C171.607852,194.34349 177.08964,219 184.89422,219 C192.838168,219 207.053653,181.690808 213,167.369639 L211.88506,154.160795 Z M149.401963,49.3706287 C147.264995,67.863011 139.924973,99.0080759 131.516467,120.420308 L131.284188,119.771452 C136.858888,86.3553932 143.594984,57.1568949 149.401963,49.3706287 Z M179.273064,166.813478 C177.972301,163.5692 176.439258,161.298206 174.766848,159.676067 C177.740022,148.645523 190.190185,125.93558 194.557034,125.93558 C195.16096,125.93558 196.090076,126.584435 196.090076,128.531002 C196.090076,135.343985 192.187786,142.156968 190.422465,145.725673 L179.273064,166.813478 Z" id="Shape"></path>
              <path d="M216.05,93 C216.9,93 217.7,93.2 218.5,93.65 C219.3,94.1 219.9,94.7 220.35,95.5 C220.8,96.3 221,97.15 221,98 C221,98.85 220.8,99.7 220.35,100.5 C219.920858,101.279333 219.279333,101.920858 218.5,102.35 C217.7,102.8 216.9,103 216,103 C215.15,103 214.3,102.8 213.5,102.35 C212.7,101.9 212.1,101.3 211.65,100.5 C211.2,99.7 211,98.9 211,98 C211,97.15 211.2,96.3 211.65,95.5 C212.079142,94.7206667 212.720667,94.0791418 213.5,93.65 C214.4,93.25 215.2,93 216.05,93 Z M216.05,93.85 C215.35,93.85 214.65,94.05 214,94.4 C213.35,94.75 212.8,95.25 212.45,95.95 C212.05,96.6 211.9,97.3 211.9,98.05 C211.9,98.75 212.1,99.45 212.45,100.1 C212.80556,100.755943 213.344057,101.29444 214,101.65 C214.65,102 215.35,102.2 216.05,102.2 C216.75,102.2 217.45,102 218.1,101.65 C218.755943,101.29444 219.29444,100.755943 219.65,100.1 C220,99.45 220.2,98.75 220.2,98.05 C220.2,97.35 220,96.65 219.65,95.95 C219.29444,95.2940567 218.755943,94.7555602 218.1,94.4 C217.45,94.05 216.75,93.85 216.05,93.85 Z M213.85,100.8 L213.85,95.4 L215.7,95.4 C216.35,95.4 216.8,95.45 217.05,95.55 C217.35,95.65 217.55,95.8 217.75,96.05 C217.9,96.3 218,96.55 218,96.85 C218,97.25 217.85,97.6 217.6,97.9 C217.3,98.2 216.95,98.35 216.5,98.4 C216.7,98.5 216.85,98.55 216.95,98.7 C217.15,98.9 217.45,99.25 217.75,99.75 L218.4,100.8 L217.35,100.8 L216.85,99.95 C216.45,99.3 216.15,98.85 215.95,98.7 C215.8,98.6 215.55,98.5 215.25,98.5 L214.75,98.5 L214.75,100.8 L213.85,100.8 Z M214.75,97.75 L215.8,97.75 C216.3,97.75 216.65,97.65 216.85,97.5 C217.05,97.35 217.15,97.15 217.15,96.9 C217.15,96.75 217.1,96.6 217,96.45 C216.9,96.3 216.8,96.25 216.65,96.15 C216.5,96.1 216.2,96.05 215.8,96.05 L214.8,96.05 L214.8,97.75 L214.75,97.75 Z" id="Shape"></path>
          </g>
          <path d="M247.5,247.5 C247.5,177.359837 247.5,113.859837 247.5,57 C142.289755,57 57,142.289755 57,247.5 L247.5,247.5 Z" class="slice-4" fill="#F060A1"></path>
          <path d="M247.5,438 L247.5,247.5 L57,247.5 C57,352.710245 142.289755,438 247.5,438 Z" class="slice-3" fill="#F060A1"></path>
          <path d="M247.5,438 C352.710245,438 438,352.710245 438,247.5 L247.5,247.5 L247.5,438 Z" class="slice-2" fill="#F060A1"></path>
          <path d="M438,247.5 C438,142.289755 352.639289,57 247.5,57 L247.5,247.5 L438,247.5 Z" class="slice-1" fill="#F060A1"></path>
      </g>
  </svg>
  <h5>Order</h5>
  </button>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

button {
  width: 200px;
  height: 200px;
  margin: 300px auto;
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  
  h5 {
    position: absolute;
    font-size: 30px;
    text-transform: uppercase;
    top: 80px;
    left: 0;
    margin: 0;
    width: 100%;
    color: #fff;
    opacity: 1;
    text-shadow: 2px 2px 2px rgba(150, 150, 150, 0);
    transition: all 0.3s, opacity 0.3s;
  }
  
  &:focus{
    outline: none;
  }
  &:hover{
    h5 {
      text-shadow: 2px 2px 2px rgba(50, 50, 50, 1);
    }
  }
  &.active {
    h5{
      opacity:0;
    }
    .slice-1 {
      animation-name: slice-1;
      animation-duration: 2s;
    }
    .slice-2 {
      animation-name: slice-2;
      animation-duration: 1.75s;
      animation-delay: 0.25s;
    }
    .slice-3 {
      animation-name: slice-3;
      animation-duration: 1.50s;
      animation-delay: 0.5s;
    }
    .slice-4 {
      animation-name: slice-4;
      animation-duration: 1.25s;
      animation-delay: 0.75s;
    }
  }
}

@keyframes slice-1 {
  0% {
    opacity: 1;
    
  }
  6% {
    opacity: 1;
  }
  12% {
    opacity: 0;
    transform: translate(50px, -50px);
  }
  90% {
    opacity: 0;
    transform: translate(50px, -50px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slice-2 {
  0% {
    opacity: 1;
    
  }
  6% {
    opacity: 1;
  }
  12% {
    opacity: 0;
    transform: translate(50px, 50px);
  }
  90% {
    opacity: 0;
    transform: translate(50px, 50px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slice-3 {
  0% {
    opacity: 1;
    
  }
  6% {
    opacity: 1;
  }
  12% {
    opacity: 0;
    transform: translate(-50px, 50px);
  }
  90% {
    opacity: 0;
    transform: translate(-50px, 50px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes slice-4 {
  0% {
    opacity: 1;
    
  }
  6% {
    opacity: 1;
  }
  12% {
    opacity: 0;
    transform: translate(-50px, -50px);
  }
  90% {
    opacity: 0;
    transform: translate(-50px, -50px);
  }
  100% {
    opacity: 1;
  }
}

            
          
!
            
              let cakes = document.querySelectorAll('.btn-cake');
let animationEvent = whichAnimationEvent();

for(let cake of cakes) {
  cake.addEventListener('click', function (){
    cake.classList.add('active');
    cake.querySelector('.slice-4')
      .addEventListener(animationEvent,animationEndCallback);
  });
}

function animationEndCallback(event) {
  this.removeEventListener(animationEvent, function(){animationEndCallback});
  this.closest('.btn-cake').classList.remove('active');
  
}

// Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var transitions = {
      "animation"      : "animationend",
      "OAnimation"     : "oAnimationEnd",
      "MozAnimation"   : "animationend",
      "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in transitions){
      if (el.style[t] !== undefined){
          return transitions[t];
      }
  }
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console