【filter完全網羅】hoverでボタンが動き出す!filterを網羅できるCSSボタンアニメーション15選

今回は全てのfilterを使ってカラフルなボタンにエフェクトを効かせてtransitionで滑らかなアニメーションを実装してみました。

filter: drop-shadow、blur、grayscale、contrast、brightness、saturate、invert、hue-rotate、sepia、opacityの10種類をアニメーションで使用しているので「フィルターエフェクト」を完全に網羅できます。

htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

 

1. filter:ドロップシャドウ、ぼかし、モノクロ、コントラスト、明度

動きは下の画像のような感じになります

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button4">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button5">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
  </div>
</div>
.container {
  width  : 100%;
  margin-top: 30px;
}
.bg-btn {
  width  : 250px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
  /* hover前:filterプロパティの「ドロップシャドウ」 */
}
.button1:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
  /* hover後:filterプロパティの「ドロップシャドウ」 */
}
.button2 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) blur(0px);
  /* hover前:filterプロパティの「ドロップシャドウ」+「ぼかし」 */
}
.button2:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) blur(2px);
  /* hover後:filterプロパティの「ドロップシャドウ」+「ぼかし」 */
}
.button3 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) grayscale(0%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「モノクロ」 */
}
.button3:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) grayscale(100%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「モノクロ」 */
}
.button4 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) contrast(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「コントラスト」 */
}
.button4:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) contrast(150%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「コントラスト」 */
}
.button5 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) brightness(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「明度」 */
}
.button5:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) brightness(150%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「明度」 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. filterプロパティのdrop-shadow、blur、grayscale、contrast、brightnessを指定してドロップシャドウ、ぼかし、モノクロ、コントラスト、明度を調整
  2. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  3. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

 

2. filter:彩度、階調反転、色相回転、セピア、透明度

動きは下の画像のような感じになります

実際の動きはこちらです
コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button4">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button5">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
  </div>
</div>
.container {
  width  : 100%;
  margin-top: 30px;
}
.bg-btn {
  width  : 250px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  transition-duration:.3s;
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) saturate(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「彩度」 */
}
.button1:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) saturate(200%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「彩度」 */
}
.button2 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) invert(0%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「階調反転」 */
}
.button2:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) invert(120%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「階調反転」 */
}
.button3 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) hue-rotate(0deg);
  /* hover前:filterプロパティの「ドロップシャドウ」+「色相回転」 */
}
.button3:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) hue-rotate(1000deg);
  /* hover後:filterプロパティの「ドロップシャドウ」+「色相回転」 */
}
.button4 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) sepia(0%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「セピア」 */
}
.button4:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) sepia(150%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「セピア」 */
}
.button5 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) opacity(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「透明」 */
}
.button5:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) opacity(50%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「透明」 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. filterプロパティのsaturate、invert、hue-rotate、sepia、opacityを指定して彩度、階調反転、色相回転、セピア、透明度を調整
  2. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  3. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

 

3. 複数のfilterを使ったおもしろボタンアニメーション

動きは下の画像のような感じになります

コードを見る
<div class="container">
  <div class="bg-btn">
    <div class="btn button1">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button2">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button3">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button4">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
    <div class="btn button5">
      <div class="fonts">
        <h1>hover</h1>
      </div>
    </div>
  </div>
</div>
.container {
  width  : 100%;
  margin-top: 30px;
}
.bg-btn {
  width  : 250px;
  height : 70px;
  margin: 0 auto;
  background-color: white;
  cursor : pointer;
}
.button1 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) grayscale(100%) saturate(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「モノクロ」+「彩度」 */
}
.button1:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) grayscale(0%) saturate(200%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「モノクロ」+「彩度」 */
}
.button2 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) contrast(100%) saturate(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「コントラスト」+「彩度」 */
}
.button2:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) contrast(150%) saturate(200%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「コントラスト」+「彩度」 */
}
.button3 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.5s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) hue-rotate(0deg) opacity(60%) saturate(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「色相回転」+「透明」+「彩度」 */
}
.button3:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) hue-rotate(700deg) opacity(100%) saturate(200%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「色相回転」+「透明」+「彩度」 */
}
.button4 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) sepia(0%) grayscale(100%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「セピア」+「モノクロ」 */
}
.button4:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) sepia(150%) grayscale(0%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「セピア」+「モノクロ」 */
}
.button5 {
  margin: 25px 0;
  border-radius: 8px;
  width  : 250px;
  height : 70px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, wheat, #FFC778 20%, orangered 45%, mediumvioletred);
  /* background-colorにグラデーションをかけて虹色を再現 */
  transition-duration:.3s;
  /* アニメーションの開始から終了までの時間を指定 */
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7)) opacity(50%) brightness(80%) saturate(80%);
  /* hover前:filterプロパティの「ドロップシャドウ」+「透明」 */
}
.button5:hover {
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)) opacity(100%) brightness(150%) saturate(200%);
  /* hover後:filterプロパティの「ドロップシャドウ」+「透明」 */
}
.fonts {
  width            : 250px;
  height           : 70px;
  padding          : 10px 0;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 1;
  transition : opacity .8s;
  /* hover後カーソルを外した際に文字と背景が消える時間を指定 */
}
.fonts h1 {
  font-size: 28px;
  margin: 10px 0;
}
.btn .fonts {
  position : absolute;
  /* .button div(hover後に現れる文字と背景)の位置を指定 */
}
ここがポイント!
  1. filterプロパティを応用して複数利用
  2. transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現
  3. position: absoluteで親要素との絶対的な位置を指定したことで影を自然な位置に固定

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる