ボタン
押せることを伝え、押したことを知らせるボタンの動きです。ホバーで背景が満ちるもの、文字が入れ替わるもの、カーソルに吸い寄せられるもの、押すとチェックが描かれるものを、デモとコードで紹介しています。
ボタンのインタラクション（23件）
-
-
「コードを再送信」のボタンを押すと、待ち時間の秒数が縦に送られて減り、0 になると押せる状態に戻る
-
分割ボタンの ▾ を押すと操作の候補が開き、選ぶとボタンの文言がその操作に替わる
-
ホバーでボタンの矢印が右へ抜け、左から新しい矢印が入る
-
ホバーでボタンの枠線がぐるりと描かれる
-
ボタンを長押しすると周りの輪が満ちて確定し、途中で離すと戻る
-
丸いボタンを押すと、スピードダイヤルのアクションが扇状に飛び出す
-
ホバーで文中のリンクの下線が左から伸び、離れると右へ抜ける
-
ホバーでボタンを光が斜めに横切る
-
ボタンを押すとつぶれて弾む
-
ボタンの枠のグラデーションが回り続け、ホバーで光が強まる
-
ホバーで丸いボタンが伸び、文字が現れる
-
登録ボタンを押すと紙吹雪が弾け、ひらひらと舞い落ちる
-
スライドボタンのつまみを右端まで引くと確定し、途中で離すと弾んで戻る
-
フォローのボタンを押すと、幅を変えながらフォロー中に変わる
-
ダウンロードボタンを押すと進捗のバーになり、満ちると完了に変わる
-
ボタンを押すと商品が弧を描いてカートに飛び込み、数字が増える
-
ボタンのクリックした位置から波紋が広がる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。