流体シェイプボタン(CSS + Web Animations API版)
CSSのborder-radiusとWeb Animations APIで実装した、ぷるぷると弾むゼリーのようなボタン。SVG版に比べてコード量が少なく、パフォーマンスも良好。大胆な振幅とオーバーシュート効果で柔らかな動きを表現。
流体シェイプボタン(SVG + SMIL版)
SVGとSMILアニメーションで実装した、ぷるぷると弾むゼリーのようなボタン。ホバー時、クリック時に有機的な形状変化を伴う滑らかなアニメーションを実現。複雑なモーフィングが可能。
ドット+黒円形アイコンボタン
左にブルーグレードット、右に黒円形矢印アイコン。ホバーでアイコン背景がブルーグレーに変化
黒タグ型ボタン
タグ型の黒背景ボタン。ホバーで矢印が右に飛び出て戻る
ブルーグレー円形アイコンボタン
右端にブルーグレーの円形矢印アイコン。ホバーで矢印が右にスライド
黒ドット枠ボタン
白ドット枠の黒背景ボタン。ホバーで矢印が2段階で移動
グレーシャドウ丸角ボタン
ライトグレー背景にシャドウ付き。ホバーで矢印が360度回転+ボタンが浮く
上下ライン矢印ボタン
上下に黒ラインのみのシンプルデザイン。ホバーで矢印が拡大
ブルーグレー丸角ボタン
淡いブルーグレーの塗りつぶし丸角ボタン。ホバーで矢印が右にスライド
ブルーグレー枠線丸角ボタン
淡いブルーグレーの枠線丸角ボタン。ホバーで矢印が右にスライド
シンプル黒丸角ボタン
黒い角丸ボタン。ホバーで矢印が右にスライド
ブルーグレー下線ボタン
ブルーグレーの下線デザイン。ホバーで矢印が2段階で移動
シンプル黒枠ボタン
黒枠のシンプルなボタン。ホバーで矢印が360度回転
破線枠ボタン
破線の黒枠デザイン。ホバーで矢印が点滅(2回)
ホバー時にテキストを変化させアイコンが少し動くCSS「削除」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「translateX」を指定し消しゴムアイコンを動かしてます。
ホバー時にテキストを変化させペンが少し動くCSS「編集」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「rotate」でペンを動かしてます。
ホバー時にテキストを変化させアイコンが少し動くCSS「送信」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「translate」を指定しアイコンを動かしてます。
ホバー時にテキストを変化させベルが少し動くCSS「通知」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「rotate」でベルを動かしてます。
ホバー時にテキストを変化させフロッピーが少し動くCSS「次へ」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「right」を指定し矢印を動かしてます。
ホバー時にテキストを変化させフロッピーが少し動くCSS「前へ」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「left」で矢印を動かしてます。
ホバー時にテキストがフロッピーに変化するCSS「保存」ボタン
ホバー時に「keyframes」の「scaleX」でテキストを変化させ「transform:scale」でフロッピーを拡大させてます。
ホバー時にフロッピーが少し動くCSS「保存」ボタン
ホバー時に「keyframes」で「transform:scale」でフロッピーを拡大させてます。
ホバー時にチェックが動くCSS「確認」ボタン
ホバー時に「keyframes」で「transform: rotate」でチェックアイコンを回転させてます。
ホバー時にペンが少し動くCSS「編集」ボタン
ホバー時に「keyframes」で「transform:rotate」でペンを少し回転させてます。
ホバー時に紙飛行機が少し動くCSS「送信」ボタン
ホバー時に「keyframes」で「transform:translate」で紙飛行機を少し動かしてます。
ホバー時に矢印が少し動くCSS「前へ」ボタン
ホバー時に「keyframes」で「left」プロパティを変動させ矢印を動かしています。
矢印が少し動くCSS「次へ」ボタン
ホバー時に「keyframes」で「right」プロパティを変動させ矢印を動かしています。
ホバー時にグラデーションの影が表示されるCSSボタンデザイン
ホバー時に「opacity」 と「filter: blur」を指定しボタン下部に影を表示しています。
ホバー時アイコンが消えて現れるCSSボタンデザイン
ホバー時にkeyframesで「opacity」を変化させ非表示→表示のアニメーションにしています。
ホバー時アイコンが上下に動くCSSボタンデザイン
ホバー時にkeyframesで「translateY」を指定し上下に移動するアニメーションにしています。
ホバー時アイコンが回転するCSSボタンデザイン
keyframesで「rotateY」を指定してアイコンを回転させてます
ホバー時アイコンが回転するCSSボタンデザイン
keyframesで「rotate3d」を指定してアイコンを回転させてます
ホバー時アイコンが震えるCSSボタンデザイン
keyframesで「translateX」を指定してアイコンをシェイクさせてます
ホバー時アイコンが少し回転するCSSボタンデザイン
keyframesで「rotate」を指定してアイコンを少し回転させてます
ホバー時アイコンが拡大するCSSボタンデザイン
keyframesで「scale」を指定してアイコンを拡大させてます
ホバー時に顔文字が変化するCSS登録ボタン
ホバー時にピンクのほっぺたが拡大します。