CSS animation で遊び倒す - Beautiful Button -

CSS animation day37 となりました。
毎日記事を投稿しているせいで、画像アップロード制限(100MB月)されました。

大変申し訳ないのですが、解除されるまで、画像は極力抑えて、codesandobox で随時貼り付けてお届けいたします。

これから数回にわたり、microinteraction で使えるボタンを作っていきます。
[前回](https://qiita.com/duka/items/108f5a32181920ae2972)割と好評だった太陽の表現方法、blur + gradient color を使い、ボタンをお届けします。


#1. 完成版
<p class="codepen" data-height="438" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="gEbQjM" style="height: 438px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Glowing  Button ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/gEbQjM/">
  Glowing  Button </a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#2. 参考文献
[Glowing Gradient Button Animation Effects on Hover Using Html and CSS - CSS Animation Effects](https://www.youtube.com/watch?v=pdH5X2mXzPk)

#3. 分解してみる

❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="button">
        Button
      </div>
    </div>
  </body>
</html>
```


```styles.scss
body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.button {
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #000;
  font-size: 24px;
}

```
<br/>



　　　　　　　　　　　　　　　　　Button
<br/>



というものができました。
<br/>
❷.
ボタンにグラデーションをつけましょう。

```styles.scss
.button {
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  border-radius: 30px;
  background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
  background-size: 400%;
}
```

ポイントは2つ
・`background-size` で大きな値を設定し、ボタンの色をgradientの3色のうちの、単色だけ表にでるように設定します。
・linear-gradientの色設定で、`最初(#5433ff)と最後(#5433ff)`を同じ色にしましょう。
これは、アニメーションで色が変化するときに、0% → 100% まではスムーズに変化しますが、
また100% → 0% に戻るときに全く違う色でれば、変な境界の線が一本入り、デザインを損ないます。
アニメーションの移行をスムーズにするための一工夫ですね。
<br/>
❸.  
ボタンにhoverしたら、色が変化するようにしましょう。

```styles.scss

.button {
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  border-radius: 30px;
  background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
  background-size: 400%;

  &:hover {
    animation: changeColor 8s linear infinite;
  }
  @keyframes changeColor {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
  }
}
```

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="vPEQNw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Glowing Button (Explanation)">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/vPEQNw/">
  Glowing Button (Explanation)</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


background-position を、hover で変化させることで、あらかじめliear-gradientで設定していた色が全て表に出てくるようになります。面白いですね。 
<br/>
❹.
beforeクラスで、blur を設定し、表現力をつけましょう。
参考文献のテクニックを、もろパクリします。

```styles.scss

.button{
  position: relative;   //追加
  ・・・
  ・・・　
}

.button:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  border-radius: 30px;
  background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
  background-size: 400%;
  filter: blur(20px);
}
```

今あるボタンに、全周的に5px 一回り大きな、擬似要素をつけます。
(このCSSの表現方法には、大変感銘を受けました。)
そして、そこに、filterをつけました。


最後に、このfilterのついた一回り大きくなった要素を、hoverで出現し、色が変化するようにしましょう。

```styles.scss

.button {
  position: relative;
  width: 300px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  border-radius: 30px;
  background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
  background-size: 400%;

  &:hover {
    animation: changeColor 8s linear infinite;

    &:before {
      opacity: 1;
      animation: changeColor 8s linear infinite;
    }
  }
  @keyframes changeColor {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
  }
}

.button:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  border-radius: 30px;
  background: linear-gradient(90deg, #5433ff, #a5fecb, #20bdff, #5433ff);
  background-size: 400%;
  filter: blur(20px);
  opacity: 0;
  transition: 0.5s;
}
```

<p class="codepen" data-height="438" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="gEbQjM" style="height: 438px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Glowing  Button ">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/gEbQjM/">
  Glowing  Button </a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

完成しました！　
いやはや、こういう表現方法を最初に考えた人は、天才ですね・・・。　

それでは、また明日〜