Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Button 1 -->
<section class="background">
  <button class="unsub-button unsub-button--balloon">
    <span class="unsub-button__default-text">Unsubscribe</span>
    <svg class="unsub-button__icon" viewBox="0 0 83.4 64">
      <path d="M6.5 15.3l30 20.4 30-20.4"/>
      <path d="M45.1 51.8H6.5V15.3h60v12.1"/>
      <circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
      <path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
    </svg>
    <span class="unsub-button__confirm-text">Are you sure?</span>
    <span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
    <svg class="unsub-button__kid" viewBox="0 0 300 300">
      <g class="unsub-button__kid-wrapper">
        <path d="M162.3 241.3s7.1 5.4 10.1 7.4c1 .7 6.1-6.3 6.1-6.3l11.8 12.8s-13.5 8.5-14.7 9.3c-3.6 2.5-13-2.1-17.5-4.1-4.4-2-4.8-7-4.8-7l5-10 4-2.1z" fill="#e2d0bc"/>
        <path d="M81.4 254.9H70.9c0-19.4 16.3-29.2 25.6-30.4h37.4c16.1 0 32.4 17.7 33.3 19.2-2 1.7-9.1 13-8.2 17.7.1.5-11.2-1.3-12-1.8-.7 1.2 1.1 41.6 1.1 41.6l-66.4-1.1-.3-45.2z" fill="#57cc99"/>
        <path d="M73.7 254.9h12l4.1 46-11.5.1c-.1.1-4.2-32.4-4.6-46.1M128 228.2c0 4.5-6.7 5.7-12.2 5.7s-12.2-1.6-12.2-5.7v-20.6H128v20.6z" fill="#e2d0bc"/>
        <path d="M128 221.1s-6.7 1.6-12.2 1.6-12.2-1.5-12.2-1.5v-24.8H128v24.7z" fill="#d3c2b2"/>
        <path d="M152.5 178.8c4.5 1.6 10.8-4.7 11.2-11.2.4-6.6-3.7-12.2-9.7-12.5.2 7.8-.2 16.1-1.5 23.7z" fill="#f2d8bc"/>
        <path d="M159.7 160.3c0 33.5-12.2 60.5-40.4 60.5-27.7 0-50-27.1-50-60.7s28.1-36.4 46.4-36.4c23.9-.1 44 3 44 36.6z" fill="#ffe8cc"/>
        <path d="M119.3 220.7c-10.4 0-20-3.8-28-10.4C78 199.5 69.2 181 69.2 160.1c0-4.8.6-8.9 1.6-12.5 4.4 41.2 12.2 63.3 48.5 73.1z" opacity=".05" fill="#010101"/>
        <path d="M160.2 134.5c-1.3-3.9-1.7-8.9-3.5-12-.3-.5-1.3-1.7-2.4-2.1-3-4.1-5.1-6.6-9.4-8.9-1.4-.8-12.6-12.7-14.2-13.3-1.2-.5.5 9.5-2.5 7.8-6-3.3-14.7-11.3-17.4-11.7-3.3-.5 1.7 11.3-2 11.3-6.9 0-12.8-6.8-16.1-7.4-.3 5.6-1 11.7-3.8 13.5-2.5 1.5-8.8-2.3-10.9-.2 1.7 5.1-.1 7.7-.4 11.2-1.4.8-3.3 1.3-3.3 1.3-2.1 3.4-2.1 6.7-3.5 11.2s-2.5 9.6-3.2 15.4c-.7 5.7.2 12.2 1.5 15.6 8.6 22.1 10.4-23 17.1-29.9 6.8-6.9 31.5-4 31.5-4s29.4-4.6 34.9 2.8c5.5 7.4 6.9 46.8 6.9 25.1.2-14.5 3.6-16.6.7-25.7z" fill="#f2cf70"/>
        <path d="M110.8 94.3c-2.9-.4.6 8.8-1 10.8 2.9-.9 1.6-10.9 1-10.8zm-18.1 3.8c-.3 5.6-1.4 12.9-5.5 13.8 2 0 3.3.3 5.7-2.7 2.3-2.9 3.1-10.5-.2-11.1zM78 111.5c1.7 5.1-.1 7.7-.4 11.2-1.4.8-3.3 1.3-3.3 1.3-2.1 3.4-2.1 6.7-3.5 11.2s-2.5 9.6-3.2 15.4c-.7 5.7 3-8.2 9.3-15.8 6.2-7.5 3.1-25.5 1.1-23.3z" fill="#d8b45b"/>
        <path d="M126.5 181c0-2.1-3.2-3.7-7.1-3.6s-7 1.8-7 3.8c.1 2.1 14.2 1.9 14.1-.2z" fill="#d3bfae"/>
        <g class="happy">
          <path d="M119.6 207.6c-6.7 0-13.7-5.3-13.7-10.6 0-2.4 1.8-3.6 4.4-3.6s4.9.8 9.3.8c4.3 0 6.8-.8 9.3-.8 2.4 0 4.4 1.2 4.4 3.6 0 5.8-7 10.6-13.7 10.6z" fill="#824547"/>
          <path d="M119.6 207.6c1.5 0 3-.2 4.4-.7-.2-2.9-2.7-5.2-5.7-5.2-2.6 0-4.8 1.8-5.5 4.2 2.1 1 4.5 1.7 6.8 1.7z" fill="#f37879"/>
        </g>
        <g class="worried sad">
          <path d="M133.3 201.5c0 2.3-1.9 4.4-4.3 4.4s-4.9-.8-9-.8c-4.3 0-6.5.8-9 .8s-4.3-2.1-4.3-4.4c0-5 6.8-8.1 13.3-8.1 6.5 0 13.3 2.7 13.3 8.1z" fill="#824547"/>
          <path d="M120 205.1c1.4 0 2.6.1 3.6.2-.8-2.1-2.9-3.6-5.3-3.6a5.7 5.7 0 00-5.5 4.1c1.9-.2 4-.7 7.2-.7z" fill="#f37879"/>
        </g>
        <ellipse cx="93.2" cy="186.2" rx="9.5" ry="8.1" fill="#fcd7cf"/>
        <ellipse cx="145" cy="186.2" rx="8.8" ry="8.1" fill="#fcd7cf"/>
        <g class="happy worried">
          <circle cx="103.5" cy="164.5" r="12.5" fill="#fff"/>
          <circle cx="105.6" cy="162.3" r="7" fill="#010101"/>
          <circle cx="135.7" cy="164.5" r="12.5" fill="#fff"/>
          <circle cx="137.9" cy="162.3" r="7" fill="#010101"/>
        </g>
        <path d="M76.1 177.4c-4.2 2.1-9-1.1-10.3-7.5-1.3-6.5 2.1-12.5 8-13.7.8 7.9 0 13.9 2.3 21.2z" fill="#ffe8cc"/>
        <g class="happy sad" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M90.2 153.8s6.4-1.6 9.5-6.9M150 154.1s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <g class="worried" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M88.2 151.8s6.4-1.6 9.5-6.9M152 152.1s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <g class="sad">
          <path d="M82.6 186.3c-1.3 1.7-3.7 2.1-5.4.9s-2.1-3.7-.9-5.4c1.3-1.7 8-8 9.7-6.8 1.8 1.2-2.1 9.6-3.4 11.3zM73.5 207.9c-.6 2.1-2.8 3.2-4.8 2.6s-3.2-2.8-2.6-4.8c.6-2.1 4.9-10.2 6.9-9.6 2.1.6 1.1 9.8.5 11.8zM155.8 185.3c1.3 1.7 3.7 2.1 5.4.9s2.1-3.7.9-5.4c-1.3-1.7-8-8-9.7-6.8-1.8 1.2 2.1 9.6 3.4 11.3zM163.9 203.9c.6 2.1 2.8 3.2 4.8 2.6 2.1-.6 3.2-2.8 2.6-4.8-.6-2.1-4.9-10.2-6.9-9.6-2.1.6-1.1 9.8-.5 11.8z" fill="#a4edff"/>
          <path d="M94.2 167c6.1-5 12.4-4.7 18.6-2.8M144.5 165c-6.7-4.3-12.4-3.3-18.3-.6" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/>
        </g>
        <path d="M193.8 240.8c1.5 6.3-.6 14.9-5.7 16.2-5.1 1.3-10.6-1.5-12.1-7.8s2.6-15.2 7.8-14.5c5.4.7 9.2 2.7 10 6.1z" fill="#ffe8cc"/>
      </g>
      <g class="unsub-button__balloon-wrapper">
        <g class="unsub-button__balloon-wrapper-inner">
          <radialGradient id="gradient" cx="186.95" cy="-179.25" r="58.2334" fx="218.4946" fy="-209.7223" gradientTransform="matrix(1 0 0 1 0 270)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#ff8080"/>
            <stop offset="1" stop-color="#d12a2a"/>
          </radialGradient>
          <g class="sad">
            <g class="balloonPopPiece balloonPopPiece--string">
              <path d="M185.2 234.9c-10.7-17-5.6-60 15.8-74.8" fill="none" stroke="#fff" stroke-miterlimit="10"/>
              <path d="M211.2 164.9c-8.7-2-2.8-2.9-6-6.3-1 .7-2.1 4.6-2.1 4.6l-4.5-6.6s4.3.6 5.3-.1c-1.4-3.6-10.6-3.6-5.4-6.2 3.4-1.7 7.2.4 9.3 2.8 3.4 3.7 7.2 1.1 7.3 3.9.1 3.6-7.9-.4-6 2.6 2.2 3.2 6.2 6.2 2.1 5.3z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
              <path d="M204.6 157.9s-1.4 12.9-5.1 9.1c-3.8-3.8 5.1-9.1 5.1-9.1s-8.6 4.5-10.7.9c-2.2-3.7 10.7-.9 10.7-.9z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
            </g>
            <path class="balloonPopPiece balloonPopPiece--1" d="M231.2 73.3c-1.8-9.7 4.1-8.5-2.5-12.1-4.2-2.3-9.9-3.8-15-8.6-5.4-5.2 7-6 2.1-12.2-4.9-6.3-10.4 2.5-13-2.9-4.2-8.8-23.3-13.4-15.9-13.4 10.4 0 20 3.4 28 9.4 4.4 3.3 5.9 15.4 10.4 20.1 3.3 3.5 10.1-.8 11.7 3.4 2.8 7.2-4.3 24.9-5.8 16.3z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path class="balloonPopPiece balloonPopPiece--2" d="M155.9 89.4c1.6 8.2-12.2-8.8-11.4-15.6.5-4.4 4.2 3.8 9.3-1 3-2.8-4.9-6.8-1.9-11.1 4.1-5.7 9.6.3 11.8 2.7 1.6 1.7 9.7-5.1 11.1 2.7 1 5.7-9.4-.4-11.6 2.7-1.9 2.5 1.8 4.1-.3 6.4-3.6 3.8-9.1 2.5-7 13.2z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path class="balloonPopPiece balloonPopPiece--3" d="M226.2 102.7c8.1 2-7.3 1.6-3.3 7.3 2.5 3.7 2.5 8.3-.8 7.9-2.3-.2-3.9 10.3-10.1 5.3-4.5-3.7 7.3-5.9 6.9-9.8-.3-3.1-4.1-1.9-4-5 .1-5 6.3-6.9 11.3-5.7z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
          </g>
          <path class="happy worried" fill="none" stroke="#fff" stroke-miterlimit="10" d="M185.2 234.9l1.1-80.9"/>
          <mask id="balloonPopMask">
            <rect x="0" y="0" width="100%" height="100%" fill="white"/>
            <circle class="balloonPopMask" fill="black" cx="188" cy="86" r="72" />
          </mask>
          <g class="target" mask="url(#balloonPopMask)">
            <path d="M237 81.4c0 32-34.3 69.1-49.6 71.7 0 1.2 2.6 4.3 2.6 4.3h-8s2.9-3.2 2.9-4.4c-15.4-3.6-48-40.5-48-71.6 0-33.1 22.4-57.3 50-57.3S237 48.3 237 81.4z" opacity=".9" fill="url(#gradient)" fill-opacity=".9"/>
            <path d="M202.4 36.7s21.9 8.7 27.1 27.8c5.4 19.9-4.1 33.1-4.1 33.1s2.3-6 .4-24c-2.4-21.9-23.4-36.9-23.4-36.9z" fill="#fff"/>
          </g>
          <path class="happy worried" d="M186.5 153.2s9.9 8.4 4.7 9.3c-5.3 1-4.7-9.3-4.7-9.3s-1.1 9.6-5.2 9.4c-4.3-.3 5.2-9.4 5.2-9.4z" fill="none" stroke="#fff" stroke-miterlimit="10"/>
        </g>
      </g>
    </svg>                            
  </button>
</section>

<!-- Button 2 -->
<section class="background">
  <button class="unsub-button unsub-button--ice-cream">
    <span class="unsub-button__default-text">Unsubscribe</span>
    <svg class="unsub-button__icon" viewBox="0 0 83.4 64">
      <path d="M6.5 15.3l30 20.4 30-20.4"/>
      <path d="M45.1 51.8H6.5V15.3h60v12.1"/>
      <circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
      <path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
    </svg>
    <span class="unsub-button__confirm-text">Are you sure?</span>
    <span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
    <svg class="unsub-button__kid" viewBox="0 0 300 300">
      <g class="unsub-button__kid-wrapper">
        <path d="M151 242.3l5.1 10.2s-.4 4.1-4.9 6.1c-4.6 2-15.5 6.1-19.2 3.5-1.2-.8-20-11.1-20-11.1l8.9-13.3s13.3 10.1 14.3 9.4c3.1-2 11.8-7 11.8-7l4 2.2z" fill="#e2d0bc"/>
        <path d="M228.1 300.1l-66.7 1.1s1.8-43.2 1.1-44.5c-.8.5-11.3 3.4-11.2 2.9.9-4.8-6.3-16.9-8.4-18.6.9-1.5 22.4-18 32.9-18H214c6.8.9 27.1 11.6 27.1 31-6.4 0-11.4.3-11.4.3l-1.6 45.8z" fill="#22577a"/>
        <path d="M238.3 254c-.2 5.8.1 16.5.1 23.5 0 6.8-5.8 23.6-5.8 23.5l-10.7-.1s4-19.4 4.1-23.4c-.8-3-2.7-14-2.7-23 1.9 0 12.9-.5 12.9-.5M181.9 205.7h24.9v21c0 4.2-6.8 5.8-12.4 5.8-5.6 0-12.4-1.2-12.4-5.8v-21z" fill="#e2d0bc"/>
        <path d="M181.9 194.3h24.9v25.3s-6.8 1.5-12.4 1.5c-5.6 0-12.4-1.6-12.4-1.6v-25.2z" fill="#d3c2b2"/>
        <path d="M159.7 149.5c-6.1-.2-10.7 5.2-10.8 12-.1 6.6 5.8 13.5 10.5 12.3-.7-7.9-.5-16.4.3-24.3z" fill="#f2d8bc"/>
        <path d="M153.5 154.3c2.6-34.2 23.3-35.8 47.6-33.8 18.6 1.4 47 6.5 44.3 40.6-2.6 34.2-27.4 60-55.6 57.8-28.6-2.1-38.9-30.5-36.3-64.6z" fill="#ffe8cc"/>
        <path d="M244.9 148.3c.7 3.7 1 8 .7 12.8-1.6 21.3-12 39.4-26.4 49.3-8.6 6.1-18.7 9.2-29.3 8.4 37.7-7 47.3-28.9 55-70.5z" opacity=".05" fill="#010101"/>
        <path d="M155 128c-3.7 9-.4 11.4-1.3 26.2-1.7 22.1 2.8-17.9 9-25 6.2-7.1 35.7-.1 35.7-.1s25.3-1 31.7 6.5c6.3 7.5 4.6 53.5 15.1 31.7 1.6-3.4 3-9.9 2.7-15.7-.3-6-1-11.2-2.1-15.9-1.1-4.7-.8-8-2.7-11.7 0 0-1.9-.7-3.3-1.6 0-3.6-1.7-6.4.5-11.4-2-2.3-8.7 1.1-11.1-.6-2.7-2-2.9-8.3-2.8-14-3.4.4-9.9 6.8-16.9 6.3-3.8-.3 2.2-11.9-1.2-11.6-2.8.2-12.2 7.7-18.6 10.5-3.2 1.5-.7-8.5-1.9-8.1-1.7.5-14 11.7-15.5 12.4-4.6 2-6.9 4.4-10.3 8.3-1.1.3-2.3 1.5-2.6 1.9-1.9 3-2.7 8.1-4.4 11.9z" fill="#f2cf70"/>
        <path d="M208.6 102.1c-1.5-2.2 2.8-11.2-.2-11.1-.6-.1-2.7 9.9.2 11.1zm16.9 5.5c2.2 3.2 3.6 3 5.6 3.2-4.1-1.2-4.6-8.7-4.5-14.5-3.5.3-3.3 8.1-1.1 11.3zm14.2 27.2c5.8 8.2 8.5 22.6 8.2 16.8-.3-6-1-11.2-2.1-15.9-1.1-4.7-.8-8-2.7-11.7 0 0-1.9-.7-3.3-1.6 0-3.6-1.7-6.4.5-11.4-1.7-2.3-6.3 15.7-.6 23.8z" fill="#d8b45b"/>
        <path d="M185.7 178c-.3 2.1 14.1 3.4 14.3 1.3.2-2-2.9-4-6.8-4.4s-7.4.9-7.5 3.1z" fill="#d3bfae"/>
        <g class="happy">
          <path d="M179.1 193.7c.2-2.4 8.3-3.1 12.6-2.8 4.5.3 12.4 2.2 12.3 4.6-.4 5.4-6.6 10.5-13.4 10s-11.9-5.9-11.5-11.8z" fill="#824547"/>
          <path d="M185.7 204.2c1.5.7 3.1 1.2 4.9 1.3 2.2.2 4.3-.2 6.1-1-.3-2.6-2.4-4.7-5.1-4.9-2.9-.2-5.4 1.8-5.9 4.6z" fill="#f37879"/>
        </g>
        <g class="worried sad">
          <path d="M191.7 191.1c6.5.4 13.1 4 12.7 9-.2 2.3-2.1 4.3-4.6 4.1-2.5-.2-4.6-1.1-8.9-1.4-4.1-.3-6.6.4-9 .2-2.4-.2-4.2-2.4-4-4.7.3-5.4 7.3-7.7 13.8-7.2z" fill="#824547"/>
          <path d="M198 203.9c-.5-2.4-2.6-4.3-5.2-4.5-2.4-.2-4.6 1.2-5.5 3.2 1 0 2.2-.1 3.6 0 3.2.3 5.2 1 7.1 1.3z" fill="#f37879"/>
        </g>
        <ellipse transform="rotate(-85.615 219.14 185.84) scale(1.00003)" cx="219.1" cy="185.8" rx="8.3" ry="9.7" fill="#fcd7cf"/>
        <ellipse transform="rotate(-85.615 166.465 181.8) scale(1.00003)" cx="166.5" cy="181.8" rx="8.3" ry="9" fill="#fcd7cf"/>
        <g class="happy worried">
          <circle cx="210.4" cy="163" r="12.7" fill="#fff"/>
          <circle cx="208.4" cy="160.6" r="7.1" fill="#010101"/>
          <circle cx="177.6" cy="160.5" r="12.7" fill="#fff"/>
          <circle cx="175.5" cy="158.1" r="7.1" fill="#010101"/>
        </g>
        <path d="M241.2 156.8c5.9 1.7 8.9 8 7.1 14.6-1.8 6.4-7 9.3-11.1 6.8 2.9-7.2 2.6-13.4 4-21.4z" fill="#ffe8cc"/>
        <g class="happy sad" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M180.1 144.3c-5.9-2-11.9 1-11.9 1M210.4 146.7c6.2-1.1 11.6 2.8 11.6 2.8" opacity=".2"/>
        </g>
        <g class="worried" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M174.7 139.7c-6.3-.4-11.2 4.1-11.2 4.1M216.1 142c6.2.8 10.2 6.2 10.2 6.2" opacity=".2"/>
        </g>
        <g class="sad">
          <path d="M228.9 182.1c1.2 1.8 3.6 2.4 5.5 1.2 1.8-1.2 2.4-3.6 1.2-5.5-1.2-1.8-7.6-8.6-9.5-7.5-1.9 1.2 1.6 9.9 2.8 11.8zM236.9 204.7c.5 2.1 2.6 3.4 4.8 2.9 2.1-.5 3.4-2.6 2.9-4.8-.5-2.1-4.4-10.7-6.5-10.2-2.1.6-1.7 9.9-1.2 12.1zM156.5 175.7c-1.4 1.7-3.9 1.9-5.6.6-1.7-1.4-1.9-3.9-.6-5.6 1.4-1.7 8.6-7.7 10.3-6.3 1.7 1.4-2.7 9.6-4.1 11.3zM147.1 194.2c-.8 2.1-3 3.1-5.1 2.3-2.1-.8-3.1-3-2.3-5.1s5.6-10.1 7.6-9.3.6 10-.2 12.1z" fill="#a4edff"/>
          <path d="M219.2 164.8c-5.9-5.5-12.4-5.6-18.8-3.9M168.2 159.7c7-4 12.8-2.6 18.6.5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"/>
        </g>
        <path d="M121.2 231.7c4.6 1.1 2.5 8.8-.6 14.6-3.1 5.8-6.9 3.2-11.6.6-4.7-2.6-7.9-7.7-4.8-13.5 1.6-3.1 11.5-2.4 17-1.7z" fill="#ffe8cc"/>
        <path d="M83.6 197.1l38.9-3.4s-7 62.8-7.8 69.9c-1.5 12.1-7 10.5-9.5.8-2-7.2-21.6-67.3-21.6-67.3z" fill="#e2af4a"/>
        <path d="M114.3 194.5c2.8-.2 8.2-.7 8.2-.7s-7 62.8-7.8 69.9c-1.5 12.1-7 10.5-9.5.8-.3-1.2-2.2-7.2-2.2-7.2s7.4 17.7 9.5 5.9c1.9-11.5 2.8-46.7 1.8-68.7z" fill="#c68d2a"/>
        <clipPath id="cone-clip">
          <path d="M83.6 197.1l38.9-3.4s-7 62.8-7.8 69.9c-1.5 12.1-7 10.5-9.5.8-2-7.2-21.6-67.3-21.6-67.3z"/>
        </clipPath>
        <path d="M96.6 193.7c-2.9 6.8-23.1 28.2-23.1 28.2m7.3 5s25.1-27 27.9-33.8m-22.9 42s31.4-35.5 34.2-42.3m-28.2 48.9s31.4-35.5 34.2-42.3m-30.3 51.5s31.4-35.5 34.2-42.3M99.6 260s31.4-35.5 34.2-42.3m-30.3 51.4s31.4-35.5 34.2-42.3m-27.1-35.7c4 6.2 27.6 23.8 27.6 23.8m-39.7-22.3c4 6.2 33.3 28.5 33.3 28.5m-44.5-26.9c4 6.2 41 35.7 41 35.7m-45.7-28c4 6.2 41 35.7 41 35.7m-43.3-26.1c4 6.2 41 35.7 41 35.7m-43.3-26c4 6.2 41 35.7 41 35.7m-43.3-26.1c4 6.2 41 35.7 41 35.7" clip-path="url(#cone-clip)" fill="#a8701e"/>
        <path d="M115 230.2c-1.5.4-1.7 5.5-.1 5.9 4.2 1.1 4.1 1.8 4.1 3.8 0 1.7 3.5-7.8 2.2-8.2-1.3-.5-5-1.8-6.2-1.5z" fill="#ffe8cc"/>
        <g class="target">
          <g class="icecreamPieces icecreamPieces--cherry">
            <circle cx="103.4" cy="41.9" r="9.3" fill="#a3131a"/>
            <path d="M99.7 35.2c-2.2 2.4-3.1 3.1-4.3 7.2-.4-4.4 3.3-7.2 4.3-7.2z" fill="#fff"/>
            <path d="M103.6 34.9s.4-10.9 14.3-8.1" fill="none" stroke="#000" stroke-width=".5" stroke-miterlimit="10"/>
          </g>
          <g class="icecreamPieces icecreamPieces--bottom">
            <path class="drip drip--slow" d="M104.5 197c-3.5 1.6.3 10.2-4.5 11.2s-3.7-9.9-5.4-11.1c-.7.6 1.8-4.7 4.5-5 3.5-.5 7.4 3.9 5.4 4.9z" fill="#513510"/>
            <path class="drip" d="M122.3 196.9c-4.7-.5-2.5 13.2-6.5 13.2s-1.7-9.1-3.6-12.1c-1-1.7-2.2-2.3-3.5-2.3 3.2-1.1 5.4-1.8 8.5-1.6 2.8.3 5.1 2.8 5.1 2.8z" fill="#3f270a"/>
            <path d="M138 188.3c.2 5.2-8 9.4-15.7 8.6-4.7-.5-8.2 4.2-10.2 1.2-1.9-3-4.1-2.8-7.6-1.1-3.5 1.6-2 2.4-5 2.9-3.4.5-3.2-1.6-4.9-2.7-1.6 1.3-5.6 2.6-7.8 2.7-2.2.1-4.3-.6-6-1.8-1.6 1.3-3.6 2.2-5.8 2.3-5.3.2-9.8-3.9-10.1-9.1-.2-3.7 1.9-7 5-8.7-.7-1.9-1.1-4.1-1.2-6.5-.8-18.5 13.6-34.1 32.1-34.9 18.5-.8 32.8 12 33.6 30.5.1 2.4-.3 5.8-.6 7.7 3.4 1.1 4 5 4.2 8.9z" fill="#513510"/>
            <path d="M138 188.3c.2 5.2-8 9.4-15.7 8.6-4.7-.5-4.3 4.2-6.5 4.2-1.7 0-2-.4-3.6-3.1-1-1.7-2.2-2.3-3.5-2.3 27.3-6.3 19.4-33.5 18.9-43.3 4.1 5.1 6.5 11.6 6.9 19 .1 2.4-.3 5.8-.6 7.7 3.3 1.4 3.9 5.3 4.1 9.2z" fill="#3f270a"/>
            <path d="M84.1 187.9c.1.8-1.4 2-2.7 1.3-1.3-.7 0-2.6 0-2.6.9-.4 2.6.5 2.7 1.3zm5.9-16s2-1.2 1.1-2.4-2.8-.8-3 0c-.3.8.8 2.4 1.9 2.4zm19.4-7.5s1.2 2.1 2.3 1.1.8-2.8 0-3.1c-.8-.3-2.3.9-2.3 2zm-10.3 21.9s1.2 2.1 2.3 1.1.8-2.8 0-3.1c-.7-.3-2.2.9-2.3 2zm22.5-8.4s1.2 2.1 2.3 1.1.8-2.8 0-3.1c-.7-.2-2.2.9-2.3 2z" fill="#a8701e"/>
          </g>
          <g class="icecreamPieces icecreamPieces--middle">
            <path class="drip" d="M105.2 153.1c-2.5.1-4.1 8.9-7.2 8.9-3.1 0-5.2-5.9-7.9-6-5.2-.1-3.5 10.1-10.5 10.1s-3.4-9.7-5.7-9.7c3.3-4.3 15.5-6.9 15.5-6.9s10.4 1.4 15.8 3.6z" fill="#f37879"/>
            <path d="M141.6 146.1c0 5.4-4.5 9.8-10 9.8-1.9 0-3.6-.5-5.1-1.4-1.5.9-3.2 1.4-5.1 1.4-2.3 0-4.4-.8-6.1-2.1-1.7 1.3-2.7 2-5 2s-2.6-2.8-5.1-2.7c-2.5.1-4.1 3.9-7.2 3.9-3.1 0-5.2-.9-7.9-1-5.2-.1-6.3 4-10.5 4.1s-3.4-3.7-5.7-3.7c-5.5 0-11.5-5-11.5-10.4 0-3.9 2.3-7.2 5.5-8.8-.6-2-.9-4.2-.9-6.8 0-19.1 15.5-34.6 34.6-34.5 19.1 0 34.6 15.5 34.6 34.6 0 2.5-.2 4.6-.7 6.6 3.6 1.4 6.1 4.9 6.1 9z" fill="#f37879"/>
            <path d="M141.6 146.1c0 5.4-4.5 9.8-10 9.8-1.9 0-3.6-.5-5.1-1.4-1.5.9-3.2 1.4-5.1 1.4-2.3 0-4.4-.8-6.1-2.1-1.7 1.3-2.7 2-5 2s-2.6-2.8-5.1-2.7c32.7-8.4 24.7-34.5 20.1-47.8 3 2.8 5.5 6.2 7.4 9.9 2.3 4.6 3.5 9.8 3.5 15.2 0 2.5-.2 4.6-.7 6.6 3.6 1.5 6.1 5 6.1 9.1z" fill="#e2696f"/>
            <path d="M118.7 135.5s1.8 1.5.8 2.5-2.9.3-3-.5 1.1-2.1 2.2-2zm-11.4-14.4c-.5-.7-2.4-.5-2.9.9s1.8 1.9 1.8 1.9c1-.3 1.6-2.2 1.1-2.8zm-24.7 0c-.6.5-.5 2.4.9 3 1.4.6 1.9-1.7 1.9-1.7-.3-1.1-2.1-1.8-2.8-1.3zm16.1 18c-.6.5-.5 2.4.9 3s1.9-1.7 1.9-1.7c-.3-1.1-2.1-1.7-2.8-1.3zm-23.9-1.5c-.6.5-.5 2.4.9 3 1.4.6 1.9-1.7 1.9-1.7-.4-1.1-2.2-1.8-2.8-1.3z" fill="#e2696f"/>
          </g>
          <g class="icecreamPieces icecreamPieces--top">
            <path class="drip drip--slow" d="M99.9 105.5c2.5.1 4.1 8.9 7.2 8.9s5.2-5.9 7.9-6c5.2-.1 3.5 10.1 10.5 10.1s3.4-9.7 5.7-9.7c-6-2.2-14.8-4.1-14.8-4.1s-10.5-.2-16.5.8z" fill="#e2f2e6"/>
            <path d="M63.5 98.5c0 5.4 4.5 9.8 10 9.8 1.9 0 3.6-.5 5.1-1.4 1.5.9 3.2 1.4 5.1 1.4 2.3 0 4.4-.8 6.1-2.1 1.7 1.3 2.7 2 5 2s2.6-2.8 5.1-2.7c2.5.1 4.1 1.9 7.2 1.9s5.2 1.1 7.9 1c5.2-.1 7 3.1 10.5 3.1 1.9 0 3.4-2.7 5.7-2.7 5.5 0 11.5-5 11.5-10.4 0-3.9-2.3-7.2-5.5-8.8.6-2 .9-4.2.9-6.8 0-19.1-15.5-34.6-34.6-34.5-19.1 0-34.6 15.5-34.6 34.6 0 2.5.2 4.6.7 6.6-3.6 1.5-6.1 5-6.1 9z" fill="#f3fff6"/>
            <path d="M99.9 105.5c2.5.1 4.1 2.9 7.2 2.9s5.2.1 7.9 0c5.2-.1 5.4 3.1 9.5 3.1s4.4-2.7 6.7-2.7c5.5 0 11.5-5 11.5-10.4 0-3.9-2.3-7.2-5.5-8.8.6-2 .9-4.2.9-6.8 0-7.1-2.2-13.7-5.8-19.2-.8 16.7 9.3 38.9-32.4 41.9z" fill="#e2f2e6"/>
            <path d="M75.6 93.4v4.7h-1.2l-.7-4.7h1.9zM123 80.8l-4.2 2.2.4 1.1 4.4-1.5-.6-1.8zm-14.9 22l-4.3-1.9-.6 1 4 2.5.9-1.6zm-13-12.9l1.7-1.3-1.3-1.6-2.2 1.6 1.8 1.3zm36.7 3.5l-.5-2.1-1.9.5.5 2.6 1.9-1zM82 84.6l-.5-2.1-1.9.5.5 2.6 1.9-1zm24.9-5.8l2-.9-.8-1.8-2.5 1 1.3 1.7zm4.1 11.4l2.5 2.8.3-2.4-1.5-.9-1.3.5zm-23.2 9.1l3.5-1.3-2.2-1.1-1.3 1.1v1.3z" fill="#513510"/>
            <path d="M137.6 73.8c-3.4-15.7-17.1-27.7-33.9-28-16.6-.4-30.9 10.7-34.9 26-1.6 6 1.1 9.1 6.7 9.2 5.6.1 5.4-13.3 12.3-13.3 6.8 0 1.7 13.6 8.2 13.7s5.2-16.1 8.8-16.1c4.5.1 2.1 10 8.9 10.2 6.8.2 1.3-10.5 8.7-11.5 7.4-1 2.9 16 9 16.1 5 .3 7.2-1.6 6.2-6.3z" fill="#381f00"/>
            <path d="M73 69.8c3.4-12.4 14.8-18.7 18.7-19.3-5.5 3-11.9 6.9-18.7 19.3z" fill="#fff"/>
          </g>
        </g>
      </g>
    </svg>
  </button>
</section>

<!-- Button 3 -->
<section class="background">
  <button class="unsub-button unsub-button--flower">
    <span class="unsub-button__default-text">Unsubscribe</span>
    <svg class="unsub-button__icon" viewBox="0 0 83.4 64">
      <path d="M6.5 15.3l30 20.4 30-20.4"/>
      <path d="M45.1 51.8H6.5V15.3h60v12.1"/>
      <circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
      <path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
    </svg>
    <span class="unsub-button__confirm-text">Are you sure?</span>
    <span class="unsub-button__instruction-text">Ruin this kid's day<br> to unsubscribe.</span>
    <svg class="unsub-button__kid" viewBox="0 0 300 300">
      <g class="unsub-button__kid-wrapper target">
        <path d="M145.9 224.8l-2 17.7s-16.8-4.9-21.2-6.5c-4.4-1.6-18.3-12-18.3-12l3.3-13.3 18.6 11 19.6 3.1z" fill="#e2d0bc"/>
        <path d="M167.9 223H206c6.8.9 27.1 11.6 27.1 31-6.4 0-11.4.3-11.4.3l-1.6 45.8-66.7 1.1s3.6-40 3-45.2c-.6-5.2-13.7-10.9-13.7-10.9s.4-21.6 1.7-21.6c3.2 0 18.8-.5 23.5-.5z" fill="#38a3a5"/>
        <path d="M230.3 254c-.2 5.8.1 16.5.1 23.5 0 6.8-5.8 23.6-5.8 23.5l-10.7-.1s4-19.4 4.1-23.4c-.8-3-2.7-14-2.7-23 1.9 0 12.9-.5 12.9-.5M173.9 205.7h24.9v21c0 4.2-6.8 5.8-12.4 5.8-5.6 0-12.4-1.2-12.4-5.8v-21z" fill="#e2d0bc"/>
        <path d="M173.9 194.3h24.9v25.3s-6.8 1.5-12.4 1.5c-5.6 0-12.4-1.6-12.4-1.6v-25.2z" fill="#d3c2b2"/>
        <path d="M145.3 155.8c-6.1.7-9.9 6.6-9.1 13.3.8 6.6 7.6 12.6 12.1 10.7-1.8-7.6-2.7-16-3-24z" fill="#f2d8bc"/>
        <path d="M139.9 161.4c-2-34.2 18.3-38.6 42.6-39.9 18.6-1.1 47.4.1 49.4 34.3s-19.1 63.1-47.3 64.8c-28.7 1.7-42.7-25.1-44.7-59.2z" fill="#ffe8cc"/>
        <path d="M229.6 143.2c1.2 3.6 2.1 7.7 2.4 12.6 1.3 21.3-6.6 40.6-19.5 52.4-7.7 7.2-17.3 11.6-27.9 12.3 36.4-12.1 43-35.1 45-77.3z" opacity=".05" fill="#010101"/>
        <path d="M137.8 135.2c-2.4 9.4 1.2 11.4 2.3 26.1 1.3 22.1.4-18.1 5.5-26 5.2-7.9 35.4-4.9 35.4-4.9s25-4.4 32.3 2.2c7.2 6.6 11.8 52.4 19.2 29.4 1.1-3.5 1.6-10.2.6-16-1.1-5.9-2.5-11-4.2-15.5-1.7-4.5-1.9-7.9-4.2-11.2 0 0-2-.4-3.4-1.1-.5-3.5-2.5-6.1-1.1-11.4-2.3-2-8.5 2.2-11.1.9-3-1.7-4-7.8-4.7-13.5-3.3.8-8.9 8.1-15.9 8.5-3.8.2.6-12.1-2.7-11.4-2.7.6-11.1 9.2-17 13-3 1.9-1.8-8.4-3-7.8-1.6.7-12.3 13.5-13.7 14.4-4.2 2.6-6.2 5.3-9 9.6-1.1.5-2 1.8-2.3 2.3-1.8 3.2-1.9 8.4-3 12.4z" fill="#f2cf70"/>
        <path d="M187.3 102.2c-1.7-1.9 1.3-11.5-1.7-10.9-.5-.1-1.3 10.2 1.7 10.9zm17.5 3.2c2.6 2.9 3.9 2.5 6 2.4-4.2-.7-5.8-8-6.4-13.7-3.4.8-2.1 8.5.4 11.3zm17.8 25.1c6.9 7.4 11.5 21.3 10.4 15.5-1.1-5.9-2.5-11-4.2-15.5-1.7-4.5-1.9-7.9-4.2-11.2 0 0-2-.4-3.4-1.1-.5-3.5-2.5-6.1-1.1-11.4-2.2-2.1-4.2 16.4 2.5 23.7z" fill="#d8b45b"/>
        <path d="M174.9 180.5c0 2.1 14.4 1.5 14.4-.6-.1-2-3.4-3.6-7.4-3.4s-7.1 1.9-7 4z" fill="#d3bfae"/>
        <g class="happy">
          <path d="M168.7 197.2c-.1-2.3 2-2.5 4.4-2.6 2.5-.1 5 .6 9.3.4 4.4-.2 6.7-1 9.3-1.1 2.6-.1 4.4 0 4.4 2.3.2 5-6.6 10.2-13.3 10.5s-13.9-4.1-14.1-9.5z" fill="#824547"/>
          <path d="M189.5 204.7c-.8-2.2-3.1-3.8-5.7-3.7-3 .1-5.4 2.4-5.5 5.1 1.4.4 2.9.5 4.4.5 2.4-.1 4.8-.8 6.8-1.9z" fill="#f37879"/>
        </g>
        <g class="worried sad">
          <path d="M182.6 192.7c6.5-.4 13.5 2.2 13.8 7.2.2 2.3-1.5 4.5-4 4.7-2.5.2-4.7-.5-9-.2-4.1.3-6.5 1.3-8.9 1.4s-4.4-1.8-4.6-4.1c-.4-5.4 6.2-8.6 12.7-9z" fill="#824547"/>
          <path d="M190.6 204.6c-.9-2.3-3.2-3.9-5.8-3.7-2.4.2-4.4 1.8-5 4 1-.2 2.2-.4 3.6-.4 3.2-.4 5.3 0 7.2.1z" fill="#f37879"/>
        </g>
        <ellipse transform="rotate(-3.371 209.123 183.817) scale(1.00003)" cx="209.1" cy="183.8" rx="9.7" ry="8.3" fill="#fcd7cf"/>
        <ellipse transform="rotate(-3.371 156.382 186.927) scale(1.00003)" cx="156.4" cy="186.9" rx="9" ry="8.3" fill="#fcd7cf"/>
        <circle cx="197.3" cy="162.3" r="12.7" fill="#fff"/>
        <circle cx="195.1" cy="160.2" r="7.1" fill="#010101"/>
        <circle cx="164.5" cy="164.3" r="12.7" fill="#fff"/>
        <circle cx="162.2" cy="162.2" r="7.1" fill="#010101"/>
        <path d="M227.1 152.1c6.1.9 9.9 6.8 9 13.5-.9 6.6-5.6 10.1-10 8.3 1.8-7.6.6-13.7 1-21.8z" fill="#ffe8cc"/>
        <g class="happy" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M151.1 152.5s6.4-1.6 9.5-6.9M211.9 150.8s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <g class="worried sad" fill="none" stroke="#010101" stroke-width="2" stroke-miterlimit="10">
          <path d="M151.1 149.5s6.4-1.6 9.5-6.9M211.9 147.8s-6.4-1.6-9.5-6.9" opacity=".2"/>
        </g>
        <path d="M93.6 149.6s18.4 44.1 10.5 66.6c-10.5 30 5.2 42.1 5.2 42.1" fill="none" stroke="#127449" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10"/>
        <path d="M103.7 174.8s0-13.7 17.3-31.4c2.9 11.5-3.2 32.7-16.3 39.8l-1-8.4zM104.2 187.6s-6-12.3-29.2-20.8c2.4 11.6 17.1 28.1 31.9 28.8l-2.7-8z" fill="#127449"/>
        <path d="M101.3 95.8c-9.9 2.6-30.1 13-24 36.1 1.4.5 6.4 1.8 12.9 0 12.5-3.3 17-14 15.4-20-.8-2.8-2.8-10.6-4.3-16.1z" fill="#db424f"/>
        <path d="M62.1 106.1c9.9-2.6 32.6-3.6 38.7 19.5-1 1.1-4.7 4.7-11.2 6.4-12.5 3.3-21.7-3.8-23.3-9.8-.6-2.7-2.7-10.5-4.2-16.1z" fill="#f96a80"/>
        <path d="M58.4 112.5c12.4-3.3 41.2-3 50.9 33.5-1.1 1.6-5.6 6.9-13.7 9.1-15.6 4.1-27.9-7.6-30.4-17.1-1.2-4.5-4.5-16.8-6.8-25.5z" fill="#db424f"/>
        <path d="M107.4 99.5c-12.4 3.3-37.3 17.8-27.6 54.2 1.8.9 8.3 3.3 16.4 1.1 15.6-4.1 20.5-20.5 18-29.9-1.2-4.4-4.5-16.6-6.8-25.4z" fill="#f96a80"/>
        <path d="M112.2 209.8c4.5 1.3 2.1 8.9-1.3 14.6-3.4 5.7-7 2.9-11.6.1s-7.5-8-4.2-13.7c1.8-3.2 11.6-2 17.1-1z" fill="#ffe8cc"/>
      </g>
    </svg>
    <svg class="unsub-button__piano" viewBox="0 0 351.4 259.5">
      <g class="unsub-button__piano-wrapper">
        <path d="M58.9 202.6l4.6-.7-3.2-55.9-9.1-3.6zM291.8 240.5l5.3-2.8 4.7-30-10 4.8z"/>
        <path d="M54 106.2s-18.2 34.6 6.5 78 93.6 131 93.6 131l7.7-5.5.4-2.7-32-35.9 46.5-104L54 106.2z"/>
        <path fill="#1e1c1b" d="M303.8 214.7l-144.9 89.8-22.6-35.1 138.6-89z"/>
        <path d="M281.6 173.3l11.2-1.1 1.7 16.2 12.3 24-7.9 5.7-22.4-28.5-1.6-9.2z"/>
        <path fill="#151413" d="M294.3 173.7l-22-22.5-115.2 42.2-53.5 39.1 30 43.8z"/>
        <path d="M139 272.9s2.5 5.3 9.7 15.1c4.3 5.8 13.6 19.1 13.6 19.1l-7.8 5.8s-10-14.7-13.7-19.6c-5.8-7.8-10.8-14.6-10.8-14.6l-28.2-34.9 10-6.1 27.2 35.2zM276.8 157.4l15 18s-1 6.2-1.6 9.9c-.6 3.7.9 8.1 4.1 12.4 3.1 4.4 7.5 9.9 7.5 9.9l-1 9.1 2.9 3 6.3-3.5 1.4-8.4s-8.8-12.5-11.7-15.6c-2.9-3.1-4.5-6.5-3.4-13.1s1.1-8 1.1-8L283.2 153l-6.4 4.4z" fill="#262626"/>
        <path d="M116.1 74.6S55.8 84.5 51 120.3s16 61.3 39.6 102.6c44.6-34.6 90.9-70.9 90.9-70.9l-65.4-77.4z" fill="#171411" stroke="#544236" stroke-width="4" stroke-miterlimit="10"/>
        <g class="lid">
          <path d="M78.4 210.9l225-11.1.8-1.2s-2.7-48.6-17.6-62.1C270.1 121.6 138.3 52 113.8 91c-21.5 34.1-26.6 72.1-35.4 119.9z"/>
          <path d="M79.5 209.6l224.7-11.1s-.3-48.5-16.8-63.3c-16.5-14.9-34-22.6-45-34.5-11-12-12.1-28.9-29.3-39.8C193.3 48.5 137.9 50 113.3 89c-21.5 34.1-25 72.8-33.8 120.6z" fill="#3d3936"/>
          <path class="crack" fill="#171411" d="M103 108.2l24.6.5 10.1 12.7 29.9 6.9-31.3-3.4-11-12.6-25.5 4.4z"/>
          <path class="crack crack--2" fill="#171411" d="M268.2 120.4L257 140.9l-16 3-19.9 23.3 17.5-26.1 16.2-4 6.8-21.1z"/>
        </g>
        <path d="M169.2 244.8s-1.8-6.5-2.5-11c-.7-4.4 4.4-11.1 11.8-14.7 7.3-3.6 21.6-5.6 21.6-5.6l4.3-10.2 10.1 1s5.8-10.4 13.8-15.3 16.3-9.9 21-3.3c4.7 6.5 1.9 7 1.9 7l-82 52.1z"/>
        <path d="M170.4 246.4s-1.8-6.5-2.5-11 4.4-11.1 11.8-14.7c7.3-3.6 21.6-5.6 21.6-5.6l4.3-10.2 10.1 1s5.8-10.4 13.8-15.3 16.3-9.9 21-3.3c4.7 6.5 1.9 7 1.9 7l-82 52.1z" fill="#282522"/>
        <path fill="#e8e7e7" d="M250.5 225.3l3.9 15-2.6.5-3.4-15.1zM276 191.8l14.2-6.5.9 2.6-14.3 5.9z"/>
        <path d="M150.9 283l88.8-56.5 11 17.2-88.7 56.7-11.1-17.4zm11.3 7.4l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.4-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.4-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.4-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.4-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.6-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.9l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9zm4.5-2.8l.9-.6-6.6-10.4-2 1.3 6.6 10.4.9-.6 4.4 7 .2-.2-4.4-6.9z" fill="#e8e7e7"/>
        <path d="M245.5 222l25.4-30.5 15.4 13.7-27.5 33-12.7-13-.6-3.2zm11.1 6l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.4-4.1l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.3-4.1l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.4-4.1l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.5-4.2l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.4-4.1l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4zm3.4-4.1l.7-.8-9.5-7.8-1.5 1.8 9.5 7.9.7-.8 6.4 5.3.2-.2-6.5-5.4z" fill="#e8e7e7"/>
        <g class="debris debris--1"><path class="debris-spin" fill="#e8e7e7" d="M227.4 252.7l14.1-6.4 1 2.5-14.4 5.9z"/></g>
        <g class="debris debris--2"><path class="debris-spin" d="M133.7 246.8l4.4.9 5.1 20-4.7-.5z"/></g>
        <g class="debris debris--3"><path class="debris-spin" fill="#e8e7e7" d="M197.2 273.9l14.1-6.4 1 2.5-14.4 5.9z"/></g>
      </g>
      <path class="dust" d="M165.9 250.9s-3.1-11.4 4.2-14.6c7.3-3.2 15 2.2 15 2.2s7.2-12.4 16-6.5 5.9 11.9 5.9 11.9 10.9-4 15.1 5.7c4.2 9.7-4.6 14.1-4.6 14.1s4.1 8.2-1.2 12.9-12.8 3.6-12.8 3.6-2.1 7.6-9.6 8.2c-7.5.5-11.9-4.9-11.9-4.9s-5.7 3.1-12.2-1c-6.5-4.1-4.5-9.5-4.5-9.5s-8.9-4.3-8.2-12.4c.7-8 8.8-9.7 8.8-9.7z" opacity=".2" fill="#7a6751"/>
      <path class="dust" d="M121.7 247.1s-3.3-12.2 4.6-15.6c7.8-3.5 16.1 2.4 16.1 2.4s7.7-13.3 17.2-6.9c9.4 6.4 6.3 12.8 6.3 12.8s11.7-4.2 16.2 6.2c4.6 10.4-4.9 15.1-4.9 15.1s4.4 8.8-1.3 13.9-13.8 3.8-13.8 3.8-2.3 8.2-10.3 8.8-12.8-5.3-12.8-5.3-6.2 3.3-13.1-1.1C119 276.8 121 271 121 271s-9.5-4.7-8.8-13.3c.8-8.7 9.5-10.6 9.5-10.6z" opacity=".2" fill="#7a6751"/>
      <path class="dust" d="M147.9 230.8s-3.3-12.2 4.6-15.6c7.8-3.5 16.1 2.4 16.1 2.4s7.7-13.3 17.2-6.9c9.4 6.4 6.3 12.8 6.3 12.8s11.7-4.2 16.2 6.2c4.6 10.4-4.9 15.1-4.9 15.1s4.4 8.8-1.3 13.9-13.8 3.8-13.8 3.8-2.3 8.2-10.3 8.8-12.8-5.3-12.8-5.3-6.2 3.3-13.1-1.1c-6.9-4.4-4.9-10.2-4.9-10.2s-9.5-4.7-8.8-13.3c.8-8.7 9.5-10.6 9.5-10.6z" opacity=".2" fill="#7a6751"/>
    </svg>
  </button>
</section>
              
            
!

CSS

              
                // Colors
$bg-dark: #22577a;
$bg-middle: #38a3a5;
$bg-light: #57cc99;
$bg-button: #fff;
$font-color: #222;
$icon-color-main: $font-color;
$icon-color-cancel: #ff6161;

.unsub-button {
  background: none;
  border: 0;
  color: $font-color;
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  font-weight: 600;
  height: 40px;
  outline: none;
  padding-right: 32px;
  position: relative;
  width: 160px;
  -webkit-tap-highlight-color: transparent;
  &.ready {
    cursor: pointer;
  }

  // Button was clicked
  &.clicked {
    &::before {
      box-shadow: 0 1px 3px rgba(#000, 0.2);
      height: 32px;
      width: 128px;
    }

    .unsub-button {
      &__icon {
        opacity: 0;
        transform: translate(-150%, -50%) scale(0);
      }

      &__default-text {
        opacity: 0;
        transform: translate(10%, 0%) scale(0);
      }

      &__confirm-text {
        .word {
          opacity: 1;
          top: 0;
        }

        .char {
          animation-name: bounce;
        }
      }
    }
  }

  // Button is ready to show instructions and kid 
  &.show-instructions {
    .unsub-button {
      &__confirm-text {
        opacity: 0;
      }

      &__instruction-text {
        opacity: 1;
        top: 110%;
      }

      &__kid {
        pointer-events: auto;

        &-wrapper {
          transform: translate(0px, 20px) rotate(0);
        }
      }
    }

    .target {
      cursor: pointer;
    }

    // Happy class is thed default happy kid
    &.happy .happy {
      opacity: 1;
    }

    // Worried class is added when the mouse hovers over the target
    &.worried .worried {
      opacity: 1;
    }

    // Sad class is added after the kid's day was "ruined"
    &.sad {
      // Fade in white-screen message
      &::after {
        color: $font-color;
        opacity: 1;
        transition: opacity 600ms linear 400ms, color 400ms linear 1400ms;
      }

      .sad {
        opacity: 1;
      }
    }
  }

  // Background of button is independent of the button content
  &::before {
    background-color: $bg-button;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(#000, 0.05);
    content: '';
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: width 300ms ease-in-out, height 300ms ease-in-out, box-shadow 300ms linear;
    width: 100%;
    z-index: 1;
  }

  // White screen with message
  &::after {
    align-items: center;
    background: #fff;
    color: #fff;
    content: 'How could you...';
    display: flex;
    height: 100vh;
    justify-content: center;
    left: 50%;
    min-width: 300px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 600ms linear 2000ms, color 600ms linear 1400ms; 
    width: 33.34vw;
    z-index: 10;
  }

  &__default-text {
    display: block;
    opacity: 1;
    position: relative;
    transform: none;
    transition: opacity 200ms linear, transform 200ms ease;
    z-index: 3;
  }

  &__icon {
    fill: none;
    stroke: $icon-color-main;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    transition: opacity 200ms linear, transform 200ms ease;
    width: 24px;
    z-index: 2;

    .cancel-color {
      stroke: $icon-color-cancel;
    }
  }

  &__confirm-text {
    left: 50%;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 200ms linear;
    white-space: nowrap;
    z-index: 3;

    .word {
      margin-right: 5px;
      opacity: 0;
      position: relative;
      top: -5px;
      transition: opacity 400ms linear var(--word-delay), top 400ms linear var(--word-delay);

      &--bold {
        color: $icon-color-cancel;
        margin: 0;
        transition: opacity 400ms linear var(--word-delay);
        white-space: nowrap;
      }

      .char {
        --bounceHeight: -5px;
        animation-duration: 400ms;
        animation-direction: alternate;
        animation-delay: var(--char-delay);
        animation-iteration-count: 2;
        display: inline-block;
      }
    }
  }

  &__instruction-text {
    color: $bg-button;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translate(-50%, 0%);
    transition: top 500ms ease 700ms, opacity 300ms linear 700ms;
    white-space: nowrap;
    z-index: 3;
  }

  &__kid {
    bottom: 4px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 0%);
    width: 150px;
    z-index: 5;

    &-wrapper {
      transform: translate(0%, 100%) rotate(20deg);
      transform-origin: 50% 100%;
      transition: transform 600ms cubic-bezier(0.6, 1.45, 0.75, 1);
    }

    .happy,
    .worried,
    .sad {
      opacity: 0;
    }
  }

  // Styles specific to the first button
  &--balloon {

    &.show-instructions {
      .unsub-button {
        &__balloon-wrapper {
          transform: translate(0, 20px);

          &-inner {
            animation-name: balloonRock;
          }
        }
      }

      &.sad {
        .balloonPopMask {
          opacity: 1;
          transform: scale(1);
        }
  
        .balloonPopPiece {
          opacity: 1;
  
          &--string {
            transform: scaleY(0.6);
            transform-origin: 60% 80%;
          }
  
          &--1 {
            transform: translate(35px, -25px);
          }
  
          &--2 {
            transform: translate(-40px, -10px);
          }
  
          &--3 {
            transform: translate(50px, 10px);
          }
        }
      }
    }

    .unsub-button {
      &__kid {
        .balloonPopMask {
          opacity: 0;
          transform: scale(0);
          transform-origin: 188px 86px;
          transition: transform 150ms linear;
        }
    
        .balloonPopPiece {
          opacity: 0;
          transition: transform 1200ms ease-out, opacity 100ms linear;
        }
      }

      &__balloon-wrapper {
        transform: translate(0%, 100%);
        transform-origin: 50% 100%;
        transition: transform 800ms ease-in;
    
        &-inner {
          animation-delay: 700ms;
          animation-duration: 2000ms;
          animation-fill-mode: forwards;
          animation-iteration-count: 1;
          animation-timing-function: ease-out;
          transform: rotate(8deg);
          transform-origin: 60% 80%;
        }
      }
    }
  }

  // Styles specific to the second button
  &--ice-cream {
    &::after {
      content: 'Shame on you...'
    }

    &.show-instructions {
      .icecreamPieces {
        animation-name: bounce;
      }

      .drip {
        transform: none;
      }

      &.sad {
        .icecreamPieces {
          transition: transform 1200ms ease-out;
          &--cherry {
            transform: translate(30px, 45px) rotate(180deg);
          }
          &--top {
            transform: translate(-10px, 55px) rotate(90deg);
          }
          &--middle {
            transform: translate(-80px, 15px) rotate(-120deg);
          }
          &--bottom {
            transform: translate(-25px, 25px) rotate(-60deg);
          }
        }

        .drip {
          display: none;
        }
      }
    }

    .unsub-button {
      &__kid {
        &-wrapper {
          transform: translate(0%, 100%) rotate(-10deg);
          transition: transform 400ms cubic-bezier(0.6, 1.45, 0.75, 1);
        }
      }
    }

    .icecreamPieces {
      animation-delay: 100ms;
      animation-direction: alternate;
      animation-iteration-count: 2;
      &--cherry {
        --bounceHeight: -40px;
        animation-duration: 250ms;
        transform-origin: 37% 14%;
      }
      &--top {
        --bounceHeight: -35px;
        animation-duration: 200ms;
        transform-origin: 37% 24%;
      }
      &--middle {
        --bounceHeight: -25px;
        animation-duration: 150ms;
        transform-origin: 37% 46%;
      }
      &--bottom {
        --bounceHeight: -15px;
        animation-duration: 100ms;
        transform-origin: 37% 60%;
      }
    }

    .drip {
      transform: translateY(-12px);
      transition: transform 800ms ease-out 400ms;

      &--slow {
        transition: transform 1200ms ease-out 800ms;
      }
    }
  }

  // Styles specific to the third button
  &--flower {
    $piano-fall-speed: 250ms;
    &::after {
      content: 'You monster...'
    }

    &.show-instructions {
      &.sad {
        &::before {
          transform: translate(-50%, -50%) rotate(6deg);
          transition: transform 1ms linear $piano-fall-speed;
        }

        .unsub-button__piano {
          bottom: 4px;
          opacity: 1;
          transform: translate(-50%, 0%) rotate(6deg);

          &-wrapper {
            transform: none;
          }

          .lid {
            transform: translateY(10px) rotate(-5deg);
          }

          .crack {
            opacity: 1;
            transform: none;
          }

          .debris {
            &--1 { transform: translate(120px, -110px); }
            &--2 { transform: translate(-100px, -60px); }
            &--3 { transform: translate(40px, -180px); }
          }
          .debris-spin {
            animation-name: spin;
          }

          .dust {
            opacity: 0.2;
            transform: scale(1.3) translateY(-20px);
          }
        }
      }
    }

    .unsub-button {
      &__kid {
        &-wrapper {
          transform: translate(0%, 100%) rotate(-10deg);
        }
      }

      &__piano {
        bottom: 600px;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transform: translate(-50%, 0%);
        transform-origin: 50% 100%;
        transition: opacity 100ms linear, bottom $piano-fall-speed linear, transition 1ms linear $piano-fall-speed;
        width: 300px;
        z-index: 6;

        &-wrapper {
          transform: translate(0, -60px);
          transition: transform 25ms linear $piano-fall-speed;
        }

        .lid {
          transform: translateY(-10px) rotate(4deg);
          transform-origin: 50% 60%;
          transition: transform 100ms linear $piano-fall-speed;
        }

        .crack {
          opacity: 0;
          transform: scale(0);
          transform-origin: 30% 46%;
          transition: transform 100ms linear $piano-fall-speed;

          &--2 {
            transform-origin: 80% 50%;
          }
        }

        .debris {
          transform: none;
          transition: transform 800ms ease-out $piano-fall-speed + 50ms;
          &--1 .debris-spin { 
            animation-duration: 300ms;
            transform-origin: 67% 96%;
          }
          &--2 .debris-spin {
            animation-duration: 600ms;
            transform-origin: 40% 100%;
          }
          &--3 .debris-spin {
            animation-duration: 650ms;
            transform-origin: 58% 105%;
          }
        }
        .debris-spin {
          animation-duration: 300ms;
          animation-delay: $piano-fall-speed;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }

        .dust {
          opacity: 0;
          transform: none;
          transform-origin: 40% 100%;
          transition: transform 800ms ease-out $piano-fall-speed, opacity 1ms linear $piano-fall-speed;
        }
      }
    }
  }
}

// Animation definitions
@keyframes balloonRock {
  0% { transform: rotate(8deg); }
  35% { transform: rotate(-3deg); }
  85% { transform: rotate(1deg); }
  100% { transform: none; }
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(var(--bounceHeight)); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/**** Wrapper styles ****************/
html,
body {
  height: 100%;
}

body {
  display: flex;
  min-width: 900px;
  -webkit-font-smoothing: antialiased;
}

.background {
  align-items: center;
  background: $bg-middle;
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  &::after {
    bottom: 15px;
    color: #fff;
    content: '2.';
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 600;
    left: 30px;
    opacity: 0.6;
    position: absolute;
  }

  &:first-of-type {
    background: $bg-dark;
    &::after {
      content: '1.'
    }
  }

  &:last-of-type {
    background: $bg-light;
    &::after {
      content: '3.'
    }
  }
}
              
            
!

JS

              
                // Grab all buttons
const buttons = document.querySelectorAll('.unsub-button')

buttons.forEach((button) => {
  button.state = 'ready'
  button.classList.add('ready')
  button.classList.add('happy')

  // Click listeners on every button
  button.addEventListener('click', () => {
    if (button.state === 'ready' ) {
      button.state = 'clicked'
      button.classList.add(button.state)
      button.classList.remove('ready')
      setTimeout(() => {
        button.state = 'show-instructions'
        button.classList.add(button.state)
      }, 2600)
    }
  })

  // Hover and click listeners on all the 'targets'
  const targetElements = button.querySelector('.target')
  if (targetElements) {
    targetElements.addEventListener('mouseenter', () => {
      if (button.state === 'show-instructions') {
        button.classList.add('worried')
        button.classList.remove('happy')
      }
    })
    targetElements.addEventListener('mouseleave', () => {
      if (button.state === 'show-instructions') {
        button.classList.add('happy')
        button.classList.remove('worried')
      }
    })
    targetElements.addEventListener('click', () => {
      if (button.state === 'show-instructions') {
        button.state = 'sad'
        button.classList.add('sad')
        button.classList.remove('happy', 'worried')
        // Reset button after displaying white-screen message
        setTimeout(() => {
          // Reset all the transitions
          button.classList.add('happy')
          button.classList.remove('sad', 'worried', 'clicked', 'show-instructions')
          setTimeout(() => {
            // Allow the button to be clicked now that the white-screen is gone
            button.state = 'ready'
            button.classList.add('ready')
          }, 2000)
        }, 2000)
      }
    })
  }
  
  // Set up button's text transition timings on page load
  const confirmTextElements = button.querySelectorAll('.unsub-button__confirm-text')
  confirmTextElements.forEach((buttonTextElement) => {
    let words = buttonTextElement.innerText.split(' '),
        wordHTML = ''
    words.forEach((word, index) => {
      if (word === 'sure?') {
        let characters = word.split(''),
            letterHTML = ''
        characters.forEach((char, index2) => {
          letterHTML += `<span class="char" style="--char-delay:${(index2 * 100) + (index * 300 + 450)}ms;">${char}</span>`
        })
        wordHTML += `<span class="word word--bold" style="--word-delay:${index * 300 + 400}ms;">${letterHTML}</span>`
      } else {
        wordHTML += `<span class="word" style="--word-delay:${index * 300 + 400}ms;">${word}</span>`
      }
    })
    buttonTextElement.innerHTML = wordHTML
  })
})
              
            
!
999px

Console