.main
  .header
    %h1
      Which dispenser is more generous? 🤔
    %p
      Hover to test.
      %strong Hard refresh
      this page for different results.
  .container
    %button.dispenser
      .paper-towel
    %button.dispenser
      .paper-towel.paper-towel--second
View Compiled
@import url('https://fonts.googleapis.com/css?family=Rokkitt:300,400,500');

// Colors
$aqua: #93c5b5;
$aquaLite: lighten($aqua, 10%);
$pomegranate: #f53a3a;
$white: #fff;
$fontColor: lighten($aqua, 40%);

$darkShadow: #222;
$paperTowelBg: $white;

$zigZagSize: 6px;

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 12px;
  font-family: "Rokkitt", Georgia, serif;
  color: $fontColor;
  background:
  linear-gradient(135deg, $aqua 22px, $aquaLite 22px, $aquaLite 24px, transparent 24px, transparent 67px, $aquaLite 67px, $aquaLite 69px, transparent 69px),
  linear-gradient(225deg, $aqua 22px, $aquaLite 22px, $aquaLite 24px, transparent 24px, transparent 67px, $aquaLite 67px, $aquaLite 69px, transparent 69px)0 64px;
  background-color:$aqua;
  background-size: 64px 128px;
    
  @media screen and (min-width: 400px) {
    font-size: 16px;
  }
}

.header {
  margin: 0 auto;
  max-width: 550px;
  margin-bottom: 8vh;
}

strong {
  font-weight: 500;
}

h1 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 0.2em;
}

h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1em;
}

p {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.3;
  
  @media screen and (min-width: 400px) {
    font-size: 1.3rem;
  }
}

.main {
  padding: 20vh 15px 0;
  text-align: center;
}

.paper-towel {
  position: absolute;
  top: 91%;
  height: 15px;
  --towel-height: 40+floor(random() * (200-40)/45)*45*1px; // random height from 40px - 200px, incremented by 45
  z-index: 1;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  background: $paperTowelBg;
  border-top: 8px solid #e2e2e2;
  transition: all 0.3s ease-in-out;

  &--second {
    --towel-height: 40+floor(random() * (200-40)/45)*45*1px; // random height from 40px - 200px, incremented by 45
  }
  
  &:before {
    top: 100%;
    background: linear-gradient(-135deg, $paperTowelBg $zigZagSize, transparent 0), linear-gradient(135deg, $paperTowelBg $zigZagSize, transparent 0);
    content: " ";
    display: block;
    position: absolute;
    left: 0px;
    width: 100%;
    height: $zigZagSize*2;
    background-repeat: repeat-x;
    background-size: $zigZagSize*2 $zigZagSize*2;
    background-position: left bottom;
  }
}

.dispenser {
  border: 1px solid $darkShadow;
  position: relative;
  border-radius: 6px;
  box-shadow: inset -4px -15px 6px 6px rgba(103, 103, 103, 0.8);
  margin: 0 2.2rem;
  width: 7.5rem;
  min-width: 7.5rem;
  height: 8.1rem;
  background: gray;
  cursor: pointer;
  
  &:before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    border-radius: 5px;
    border-bottom: 4px solid $darkShadow;
    border-top: 4px solid $darkShadow;
    border-right: 8px solid $darkShadow;
    border-left: 8px solid $darkShadow;
    box-sizing: border-box;
    background: $darkShadow;
    transition: background 0.3s ease-in-out;
  }
  
  &:after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 90%;
    border-radius: 3px;
    height: 15px;
    box-shadow: inset 0px 8px 10px 0px $darkShadow;
    transform: translateX(-50%);
  }
  
  &:hover,
  &:active,
  &:focus {
    outline: none;
    
    &:before {
      background: $pomegranate;
    }
    
    .paper-towel {
      animation: dispense 2s cubic-bezier(0.64, -0.28, 0.48, 1.59);
      animation-fill-mode: forwards;
    }
  }
}

.container {
  margin: 0 auto;
  max-width: 400px;
  display: flex;
  justify-content: space-around;
}

@keyframes dispense {
  0% {
    height: 15px;
  }
  
  60%, 100% {
    height: var(--towel-height);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.