订阅按钮动画

下载代码

html

css

分享到微信朋友圈

html

<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>

<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>

<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

.unsub-button {
  background: none;
  border: 0;
  color: #222;
  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;
}
.unsub-button.ready {
  cursor: pointer;
}
.unsub-button.clicked::before {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  height: 32px;
  width: 128px;
}
.unsub-button.clicked .unsub-button__icon {
  opacity: 0;
  transform: translate(-150%, -50%) scale(0);
}
.unsub-button.clicked .unsub-button__default-text {
  opacity: 0;
  transform: translate(10%, 0%) scale(0);
}
.unsub-button.clicked .unsub-button__confirm-text .word {
  opacity: 1;
  top: 0;
}
.unsub-button.clicked .unsub-button__confirm-text .char {
  animation-name: bounce;
}
.unsub-button.show-instructions .unsub-button__confirm-text {
  opacity: 0;
}
.unsub-button.show-instructions .unsub-button__instruction-text {
  opacity: 1;
  top: 110%;
}
.unsub-button.show-instructions .unsub-button__kid {
  pointer-events: auto;
}
.unsub-button.show-instructions .unsub-button__kid-wrapper {
  transform: translate(0px, 20px) rotate(0);
}
.unsub-button.show-instructions .target {
  cursor: pointer;
}
.unsub-button.show-instructions.happy .happy {
  opacity: 1;
}
.unsub-button.show-instructions.worried .worried {
  opacity: 1;
}
.unsub-button.show-instructions.sad::after {
  color: #222;
  opacity: 1;
  transition: opacity 600ms linear 400ms, color 400ms linear 1400ms;
}
.unsub-button.show-instructions.sad .sad {
  opacity: 1;
}
.unsub-button::before {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 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;
}
.unsub-button::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;
}
.unsub-button__default-text {
  display: block;
  opacity: 1;
  position: relative;
  transform: none;
  transition: opacity 200ms linear, transform 200ms ease;
  z-index: 3;
}
.unsub-button__icon {
  fill: none;
  stroke: #222;
  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;
}
.unsub-button__icon .cancel-color {
  stroke: #ff6161;
}
.unsub-button__confirm-text {
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 200ms linear;
  white-space: nowrap;
  z-index: 3;
}
.unsub-button__confirm-text .word {
  margin-right: 5px;
  opacity: 0;
  position: relative;
  top: -5px;
  transition: opacity 400ms linear var(--word-delay), top 400ms linear var(--word-delay);
}
.unsub-button__confirm-text .word--bold {
  color: #ff6161;
  margin: 0;
  transition: opacity 400ms linear var(--word-delay);
  white-space: nowrap;
}
.unsub-button__confirm-text .word .char {
  --bounceHeight: -5px;
  animation-duration: 400ms;
  animation-direction: alternate;
  animation-delay: var(--char-delay);
  animation-iteration-count: 2;
  display: inline-block;
}
.unsub-button__instruction-text {
  color: #fff;
  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;
}
.unsub-button__kid {
  bottom: 4px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 0%);
  width: 150px;
  z-index: 5;
}
.unsub-button__kid-wrapper {
  transform: translate(0%, 100%) rotate(20deg);
  transform-origin: 50% 100%;
  transition: transform 600ms cubic-bezier(0.6, 1.45, 0.75, 1);
}
.unsub-button__kid .happy,
.unsub-button__kid .worried,
.unsub-button__kid .sad {
  opacity: 0;
}
.unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper {
  transform: translate(0, 20px);
}
.unsub-button--balloon.show-instructions .unsub-button__balloon-wrapper-inner {
  animation-name: balloonRock;
}
.unsub-button--balloon.show-instructions.sad .balloonPopMask {
  opacity: 1;
  transform: scale(1);
}
.unsub-button--balloon.show-instructions.sad .balloonPopPiece {
  opacity: 1;
}
.unsub-button--balloon.show-instructions.sad .balloonPopPiece--string {
  transform: scaleY(0.6);
  transform-origin: 60% 80%;
}
.unsub-button--balloon.show-instructions.sad .balloonPopPiece--1 {
  transform: translate(35px, -25px);
}
.unsub-button--balloon.show-instructions.sad .balloonPopPiece--2 {
  transform: translate(-40px, -10px);
}
.unsub-button--balloon.show-instructions.sad .balloonPopPiece--3 {
  transform: translate(50px, 10px);
}
.unsub-button--balloon .unsub-button__kid .balloonPopMask {
  opacity: 0;
  transform: scale(0);
  transform-origin: 188px 86px;
  transition: transform 150ms linear;
}
.unsub-button--balloon .unsub-button__kid .balloonPopPiece {
  opacity: 0;
  transition: transform 1200ms ease-out, opacity 100ms linear;
}
.unsub-button--balloon .unsub-button__balloon-wrapper {
  transform: translate(0%, 100%);
  transform-origin: 50% 100%;
  transition: transform 800ms ease-in;
}
.unsub-button--balloon .unsub-button__balloon-wrapper-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%;
}
.unsub-button--ice-cream::after {
  content: "Shame on you...";
}
.unsub-button--ice-cream.show-instructions .icecreamPieces {
  animation-name: bounce;
}
.unsub-button--ice-cream.show-instructions .drip {
  transform: none;
}
.unsub-button--ice-cream.show-instructions.sad .icecreamPieces {
  transition: transform 1200ms ease-out;
}
.unsub-button--ice-cream.show-instructions.sad .icecreamPieces--cherry {
  transform: translate(30px, 45px) rotate(180deg);
}
.unsub-button--ice-cream.show-instructions.sad .icecreamPieces--top {
  transform: translate(-10px, 55px) rotate(90deg);
}
.unsub-button--ice-cream.show-instructions.sad .icecreamPieces--middle {
  transform: translate(-80px, 15px) rotate(-120deg);
}
.unsub-button--ice-cream.show-instructions.sad .icecreamPieces--bottom {
  transform: translate(-25px, 25px) rotate(-60deg);
}
.unsub-button--ice-cream.show-instructions.sad .drip {
  display: none;
}
.unsub-button--ice-cream .unsub-button__kid-wrapper {
  transform: translate(0%, 100%) rotate(-10deg);
  transition: transform 400ms cubic-bezier(0.6, 1.45, 0.75, 1);
}
.unsub-button--ice-cream .icecreamPieces {
  animation-delay: 100ms;
  animation-direction: alternate;
  animation-iteration-count: 2;
}
.unsub-button--ice-cream .icecreamPieces--cherry {
  --bounceHeight: -40px;
  animation-duration: 250ms;
  transform-origin: 37% 14%;
}
.unsub-button--ice-cream .icecreamPieces--top {
  --bounceHeight: -35px;
  animation-duration: 200ms;
  transform-origin: 37% 24%;
}
.unsub-button--ice-cream .icecreamPieces--middle {
  --bounceHeight: -25px;
  animation-duration: 150ms;
  transform-origin: 37% 46%;
}
.unsub-button--ice-cream .icecreamPieces--bottom {
  --bounceHeight: -15px;
  animation-duration: 100ms;
  transform-origin: 37% 60%;
}
.unsub-button--ice-cream .drip {
  transform: translateY(-12px);
  transition: transform 800ms ease-out 400ms;
}
.unsub-button--ice-cream .drip--slow {
  transition: transform 1200ms ease-out 800ms;
}
.unsub-button--flower::after {
  content: "You monster...";
}
.unsub-button--flower.show-instructions.sad::before {
  transform: translate(-50%, -50%) rotate(6deg);
  transition: transform 1ms linear 250ms;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano {
  bottom: 4px;
  opacity: 1;
  transform: translate(-50%, 0%) rotate(6deg);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano-wrapper {
  transform: none;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .lid {
  transform: translateY(10px) rotate(-5deg);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .crack {
  opacity: 1;
  transform: none;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--1 {
  transform: translate(120px, -110px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--2 {
  transform: translate(-100px, -60px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris--3 {
  transform: translate(40px, -180px);
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .debris-spin {
  animation-name: spin;
}
.unsub-button--flower.show-instructions.sad .unsub-button__piano .dust {
  opacity: 0.2;
  transform: scale(1.3) translateY(-20px);
}
.unsub-button--flower .unsub-button__kid-wrapper {
  transform: translate(0%, 100%) rotate(-10deg);
}
.unsub-button--flower .unsub-button__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 250ms linear, transition 1ms linear 250ms;
  width: 300px;
  z-index: 6;
}
.unsub-button--flower .unsub-button__piano-wrapper {
  transform: translate(0, -60px);
  transition: transform 25ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .lid {
  transform: translateY(-10px) rotate(4deg);
  transform-origin: 50% 60%;
  transition: transform 100ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .crack {
  opacity: 0;
  transform: scale(0);
  transform-origin: 30% 46%;
  transition: transform 100ms linear 250ms;
}
.unsub-button--flower .unsub-button__piano .crack--2 {
  transform-origin: 80% 50%;
}
.unsub-button--flower .unsub-button__piano .debris {
  transform: none;
  transition: transform 800ms ease-out 300ms;
}
.unsub-button--flower .unsub-button__piano .debris--1 .debris-spin {
  animation-duration: 300ms;
  transform-origin: 67% 96%;
}
.unsub-button--flower .unsub-button__piano .debris--2 .debris-spin {
  animation-duration: 600ms;
  transform-origin: 40% 100%;
}
.unsub-button--flower .unsub-button__piano .debris--3 .debris-spin {
  animation-duration: 650ms;
  transform-origin: 58% 105%;
}
.unsub-button--flower .unsub-button__piano .debris-spin {
  animation-duration: 300ms;
  animation-delay: 250ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.unsub-button--flower .unsub-button__piano .dust {
  opacity: 0;
  transform: none;
  transform-origin: 40% 100%;
  transition: transform 800ms ease-out 250ms, opacity 1ms linear 250ms;
}

@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: #38a3a5;
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.background::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;
}
.background:first-of-type {
  background: #22577a;
}
.background:first-of-type::after {
  content: "1.";
}
.background:last-of-type {
  background: #57cc99;
}
.background:last-of-type::after {
  content: "3.";
}

JavaScript

// 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
  })
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg