Quttons

JavaScript

ボタンの形状やカラーが変化するjQueryプラグイン「Quttons」

Quttonsはボタンをクリックすると形状やカラーが変化して新しいコンテンツを表示することができるjQueryプラグインです。滑らかなアニメーションで変化しながらコンテンツが現れる姿は、見ていてとてもおもしろいですね。使い方次第でいろんな用途に活用できるかと思います。

Quttons

デモ

デモでは3つのボタンが設置されており、クリックで各ボタンに応じたコンテンツが表示されます。左からファイルアップロード、確認ダイアログ、コメント投稿になります。

各コンテンツはクリックしないと表示されない仕組みになっているので、通常時はとてもシンプルですね。

スペースの有効活用にもなりますし、見た目もスッキリするのがGoodです。パソコンはもちろん、スマホやタブレットからも操作しやすいのではないでしょうか?

背景カラーや縦横サイズ、easingなどをカスタマイズすることもできるので、気になる方はぜひチェックしてみてください。

というわけで、アニメーションでボタンの形状やカラーが変化する「Quttons」のご紹介でした。

Quttons

iPhone画面が暗くならない設定方法iPhoneの画面が暗くならない(消えない)ようにする設定方法前のページ

【Goal Zero社】キックスタンドや太陽光強度インジケータを搭載したソーラーパネル「Nomad 7 Plus」次のページNomad 7 Plus Solar Panel

関連記事

  1. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

  2. jQuery UI Month Picker Plugin
  3. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

  4. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  5. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP