一覧
状態:確認中
閲覧数:1,852
投稿日:2017-01-01
更新日:2017-01-07
マウスhover+clickエフェクト
マウスhoverエフェクト
clickエフェクト
斜め線
Web2.0 ボタン
・Pure CSS で光沢系ボタンを実装
・画像ボタンと比較すると、完成度はどうしても低くなる
その他
マウスhoverエフェクト
clickエフェクト
斜め線
Web2.0 ボタン
・Pure CSS で光沢系ボタンを実装
・画像ボタンと比較すると、完成度はどうしても低くなる
その他
マウスhover+clickエフェクト
設置済
SVGフィルタによる歪んだボタンのエフェクト
Bootstrap ボタンのデザイン
CSSのみの「Material デザイン」アニメーションボタン
Pure CSS ボタン
box-shadow の ボタン hover エフェクト
アニメーション投票ボタン(pure CSS)
花火のボタン:D
未設置
Button with Built-in Loading Indicator -JS and SCSS
・ボタン → ローディングアニメーション
見送り
Big Fancy 3D Rotating SVG Button
・react使用
マウスhoverエフェクト
設置済
背景カラーが左右に分かれていく / 奥から背景をふわっと表示させる #2 / 要素がパタッと開く / キューブ状にクルッと回転する
ボタンスタイルとエフェクトのインスピレーション
ステッチ装飾のあるボタン / ふわっと浮くボタン
シンプルなアイコンhoverエフェクト
3D swing ボタン
ボタンhoverエフェクトのコレクション
Erik Deiner の Twitter Button コンセプト
未設置
私の好きなリンクのhoverスタイル
・TweenLite依存
clickエフェクト
設置済
Squishy Toggle ボタン
Progress ボタン
弾みのあるボタン
未設置
Upload Button
Social Share Button
Shazam-Like Morphing Button Effect
Bullsh*t button with ThreeJS only
・ThreeJS, ThreeCSG 依存
その他
設置済
Email Input Validation 動作 - JS 及び SCSS
Subscribe フォーム #1
Subscribe フォーム #2
Pixie Dust 入力
未設置
4000 Material Design Icons. For Android, desktop and web applications
1次選考
設置候補 … 15
SVGフィルタによる歪んだボタンのエフェクト
・エフェクトが希少
Bootstrap ボタンのデザイン
・何の面白みもないが、ボタンだとひと目で分かる
box-shadow の ボタン hover エフェクト
・かなり良い
アニメーション投票ボタン(pure CSS)
・希少エフェクト
・flexコメントアウトすると正常動作しないため、コード理解が必要
花火のボタン:D
・希少エフェクト
・「display:flex;」依存している
背景カラーが左右に分かれていく / 奥から背景をふわっと表示させる #2 / 要素がパタッと開く / キューブ状にクルッと回転する
ボタンスタイルとエフェクトのインスピレーション
シンプルなアイコンhoverエフェクト
3D swing ボタン
Erik Deiner の Twitter Button コンセプト
SVGで画面全体に斜め線や曲線を引く
「斜線」2本描画
Email Input Validation 動作 - JS 及び SCSS
Subscribe フォーム #1
Pixie Dust 入力
次点 … 2
CSSのみの「Material デザイン」アニメーションボタン
・すっきりしていて今風だが、普通の人がボタンと認識するか、若干不安が残る
ステッチ装飾のあるボタン / ふわっと浮くボタン
・「2-2.animationを使って常にボタンがふわふわと浮いているように見せる」は、モバイル右下へ配置すると良いかも
何かの際に参考にするかも … 2
Progress ボタン
・ブログレスバーを設置する際に参考にするかも
・ブログレスバーの進捗状況との連動の仕方は不明
Subscribe フォーム #2
落選 … 5
Pure CSS ボタン
・全体的にイマイチ
ボタンhoverエフェクトのコレクション
・使用する場面を想像できない
Squishy Toggle ボタン
・白背景では、(質感があり過ぎて)汚く見える
弾みのあるボタン
・動きは面白いが、実際に使用する場面を想像できない
斜めのストライプ
・実際にボタンを作成してみたが、期待していた程良い感じでもなかった
1次選考結果
選考総数
・24
2次選考進出
・15/24
1次選考敗退
・9/24
選考期間
・8日間
・2017-1-1 ~ 2017-1-8
2次選考
設置候補 … 15
SVGフィルタによる歪んだボタンのエフェクト
・SVGエフェクトはqualityが高い
Bootstrap ボタンのデザイン
・定番のデザイン
・相対評価によりここで落選
・面白みがない
・新しさがない
box-shadow の ボタン hover エフェクト
・現時点の設置候補No.1
アニメーション投票ボタン(pure CSS)
・安定の設置候補
花火のボタン:D
・相対評価によりここで落選
・使い所がちょっとだけ難しいかも
背景カラーが左右に分かれていく / 奥から背景をふわっと表示させる #2 / 要素がパタッと開く / キューブ状にクルッと回転する
・相対評価によりここで落選
・普通の人にはボタンだと、もしかしたら分かり辛いかも
・アニメーションは面白いが、何度も試す際はウザくなるかも
ボタンスタイルとエフェクトのインスピレーション
・qualityは高い
シンプルなアイコンhoverエフェクト
3D swing ボタン
・相対評価によりここで落選
・悪くはないが、決め手に欠ける
Erik Deiner の Twitter Button コンセプト
・相対評価によりここで落選
・悪くはないが、毎回パカパカ開閉するのも面倒な気がする
SVGで画面全体に斜め線や曲線を引く
「斜線」2本描画
・相対評価によりここで落選
・悪くはないが、決め手に欠ける
Email Input Validation 動作 - JS 及び SCSS
・quality高い
Subscribe フォーム #1
・相対評価によりここで落選
・悪くはないが、同じ入力フォームなら、「Email Input Validation 動作 - JS 及び SCSS」の方が良い
Pixie Dust 入力
3次選考
設置候補 … 8
SVGフィルタによる歪んだボタンのエフェクト
・完成している
・他のカスタマイズ結果次第
・jsで色指定しているため、例えば「カテゴリ毎に異なる色のボタンを複数設置」などという要件には対応が難しい
・依存ライブラリTweenMax.js
・使い所が難しい
・このためだけに、TweenMax.js導入するには、若干の抵抗がある
box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示
アニメーション投票ボタン(pure CSS)
・要カスタマイズ
・落選
ボタンスタイルとエフェクトのインスピレーション
・完成している
・他のカスタマイズ結果次第
シンプルなアイコンhoverエフェクト
・アイコン部門の最終候補
・落選
SVGで画面全体に斜め線や曲線を引く
・ボタン部門の設置候補No.5
・デザインのみ
・「hover」「click」 エフェクトなし
Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の最終候補
Pixie Dust 入力
・入力部門の最終候補
最終的に
ボタンスタイルとエフェクトのインスピレーション
・完成している
・通常ボタンの第1候補
box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示
Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の第1候補
Pixie Dust 入力
・入力部門の第1候補
・完成している
・通常ボタンの第1候補
box-shadow の ボタン hover エフェクト
・要カスタマイズ
・テキスト表示
Email Input Validation 動作 - JS 及び SCSS
・入力フォーム部門の第1候補
Pixie Dust 入力
・入力部門の第1候補
Twitter検索結果。「ボタン候補」に関する最新ツイート
もっとボタンが仕事した!3候補のうちの1人、嘘つきセリア降臨٩( 'ω' )و後半は完走回避です。゚(゚´Д`゚)゚。 #グラサマ https://t.co/AcN7npCjLV 2023/02/05 07:17



回想。エリアゼロ調査の協力者候補。
ネモとボタンについて、クリアしていればペパーの反応も変わるんですかね?
#ポケモンSV https://t.co/3Y0bB4EXhs 2023/02/04 19:09


Qin F22 Proの物理ボタンを使用する日本語入力、この手の端末で定番のnicoWnnGを使用することで可能となる。ミニキーボードをニ列以上、もしくは完全表示にすれば物理ボタンに無いクリアキーを補完出来る。ただ辞書に難ありで変換候補に不満が出る https://t.co/ltOnIPkLoH 2023/02/03 22:51



候補は
シロナさん
ボタン
レムorラム
ここは長袖だから行ける
その他は寒くて無理かも 2023/02/03 18:06
QRからインスタに飛ぶ方法(iOSバージョン16以上の方対象)
1.画像を保存
2.写真から保存した画像を見に行く
3.画像の右下にある文字認識ボタンをタップ
4.QRタップ
5.いくつか候補が現れるのでInstagramを開くをタップ
でOKですー! https://t.co/Vck740LVTE 2023/02/03 12:39

初回の生成がイマイチだった場合、
何回か生成ボタンを押して候補を複数個作る
→比較(保存ボタンで後から見返せる。)
#Catchy 2023/02/03 12:11