- CSS 背景が波打つボタン
- ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置...
- 2021-02-23 13:43:13
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
ボタン
ボタンの表現のいろいろなサンプルです。
「ボタン」に関するサンプル
- CSS ボタンのホバーアニメ
- ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
- 2021-01-01 23:05:09
- jQuery 長押しで発動
- マウスやスマホ用の長押しボタンのサンプルです。 クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。 このサンプルではボタンに触れて２秒後に設定しています。...
- 2019-07-28 04:12:53
- HTML5 ダウンロードボタン
- HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。 下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合...
- 2019-07-28 04:49:43
- JS タップ圧力（感圧）検知
- スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press...
- 2019-07-29 21:46:07
- jQuery マウスのトリガーいろいろ
- マウスの動きで発動させる場合によく使われる記述を一部列挙しておきます。 クリックしたら、何かが起こる仕掛けはよく使われますが、ダブルクリックや右クリック（＝コンテクストメニュー）でも発動させることが可能です。 マウスの場...
- 2019-07-29 21:39:13
- VueJS ifのクリックで切り替え
- コードを書くときに、条件分岐は必須です。 その中で重要な役割を果たす「if」のコードのサンプルです。 .demo_code { background-color: #DDD; m...
- 2019-07-29 06:38:27
- jQuery メニューのトグルボタン
- スマホの左上や右上によく見かけるメニューボタンのサンプルです。 ハンバーガーメニューとも言われますが、そのボタンを押すとクローズボタンに切り替わりま...
- 2019-07-29 06:29:24
Top