0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSS animation で遊び倒す - Beautiful Button -

Last updated at Posted at 2019-02-27

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

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

これから数回にわたり、microinteraction で使えるボタンを作っていきます。
前回割と好評だった太陽の表現方法、blur + gradient color を使い、ボタンをお届けします。

#1. 完成版

See the Pen Glowing Button by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. 参考文献
Glowing Gradient Button Animation Effects on Hover Using Html and CSS - CSS Animation Effects

#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;
}


                 Button

というものができました。


❷.
ボタンにグラデーションをつけましょう。

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% に戻るときに全く違う色でれば、変な境界の線が一本入り、デザインを損ないます。
アニメーションの移行をスムーズにするための一工夫ですね。


❸.
ボタンに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%;
    }
  }
}

See the Pen Glowing Button (Explanation) by hiroya iizuka (@hiroyaiizuka) on CodePen.

background-position を、hover で変化させることで、あらかじめliear-gradientで設定していた色が全て表に出てくるようになります。面白いですね。


❹.
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;
}

See the Pen Glowing Button by hiroya iizuka (@hiroyaiizuka) on CodePen.

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

それでは、また明日〜

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?