1. 完成版

See the Pen DownLoads! by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

Pure CSS Loading Bar Button
CSS Fizzy uploading-0
Button

3. 分解してみる

❶.
前回の動画です。

問題点はというと、
1: hover した時に、microinteraction が統一されていない。
2: daownloadするためのボタンなのに、hover に演出が偏りすぎている、Particle があざとい

などが考えられます。

Particle はクリックしてダウンロードした時に瞬間出るようにし、さらにクリックしたことがわかるように形を変えていきましょう。

クリックしたら、〜がおこる　というコードを、Javascript なしで書いていきます。
このかき方をよく存じないかたは、以前の記事をご参照ください。

index.html

<body>
    <div class="container">
      <input type="checkbox" id="start" />
      <label for="start">
        <div class="button">
          <span>Downloads</span>
          <i class="fas fa-download"></i>
　　　　　　　　　　　・・・

styles.scss

　　　　　・・・
.button {

  &:hover {
    animation: hoverEffect 1s ease;
    box-shadow: 220px 0px 20px #fff inset;

    span {
      transform: translateX(25px);
      transition-duration: 0.3s;
      color: #000;
    }

    i {
      opacity: 1;
      transition-duration: 0.3s;
      transform: translate(42px, -36px);
    }
  }
}

# start {
  display: none;
}

# start:checked ~ label .button {
  @for $i from 1 through 100 {
    .particle {
      animation: particle 2s ease-out 0.1s;
    }

    @keyframes particle#{$i} {
      0%,
      50% {
        opacity: 0;
        transform: translate(25vw, 20vh);
      }
      100% {
        opacity: 1;
        transform: translate(random(35) * 1vw, random(25) * 1vh);
      }
    }
  }
}

クリックして、Particle が出るようになりました。

❷.
ただし、これだけでは、ダウンロードしてるよ！というフィードバックが足りてません。
マイクロインタラクションの本によると、データを前面に出すと良いとのことです。
つまり、あとどれくらいでダウンロードが完了するかが、一目でわかるデータです。
ボタンの形状を変えて、ダウンロードの進行具合のデータがわかるようにしましょう。

styles.scss


# start:checked ~ label .button {
         　　・・・
  animation: download 2s cubic-bezier(0.755, -0.245, 0.175, 1) 0.1s forwards,
    success 0.2s ease 1.9s forwards;
}


@keyframes download {
  10% {
    width: 20px;
    height: 40px;
    background-color: #fff;
  }

  35% {
    width: 405px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #000;
  }

  38% {
    width: 384px;
    height: 16px;
    background-color: #000;
    border: 2px solid #000;
  }

  40% {
    width: 400px;
    height: 16px;
    background-color: #000;
    border: 2px solid #000;
    box-shadow: 10px 0px 2px #ded46e inset;
  }
  55% {
    width: 400px;
    height: 16px;
    background-color: #000;
    box-shadow: 100px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  70% {
    width: 400px;
    height: 16px;
    background-color: #000;
    box-shadow: 200px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  97% {
    width: 400px;
    height: 16px;
    opacity: 1;
    background-color: #000;
    box-shadow: 500px 0px 2px #ded46e inset;
    border: 2px solid #000;
  }
  100% {
    opacity: 0;
  }
}

@keyframes success {
  50% {
    opacity: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
  75% {
    opacity: 1;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
  100% {
    opacity: 1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    box-shadow: 200px 0px 2px #ded46e inset;
  }
}

かなり、いい感じの動きになりました。
Particle もこれだと、あまり違和感なく、効果的ですね。

❸.
最後の円にダウンロードが終了したフィードバックをつけましょう。
マイクロインタラクションの本によると、文字のラベルはなるべくさけ、アイコンに変えられれば変えた方が良いとのことです。

終了のアイコンを、FontAwsome で探しましょう。

index.html

 <div class="button">
          <span>Downloads</span>
          <i class="fas fa-download"></i>
          <i class="fas fa-check"></i> //追加
          <div class="particles"> 
          ・・・

styles.scss


# start:checked ~ label .button {
  span,
  .fa-download {
    opacity: 0;
  }

  .fa-check {
    font-size: 28px;
    color: #fff;
    transform: translate(15px, -10px);
    animation: complete 0.3s ease 2.4s forwards;
  }
  animation: download 2s cubic-bezier(0.755, -0.245, 0.175, 1) 0.1s forwards,
    success 0.3s ease 1.7s forwards;
}

@keyframes complete {
  100% {
    opacity: 1;
  }
}

完成しました。
一つ一つのアニメーションを丁寧につなぎ合わせることで、ボタンに命を吹き込むことができますね。

それでは、また明日〜