二重送信の防止に。ボタンにローディングアイコンを追加·Ladda MOONGIFT
LaddaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。 フォームで最後に必ずあるのが送信ボタンです。最近ではAjaxを使っている場合も多く、送信した直後に何らかの反応をしないと二重送信やストレスの原因になってしまいます。そこで使ってみたいのがLaddaです。 色々なタイプのボタンが用意されています。まず左上をクリックしてみます。 ボタンの横からローディングアイコンが表示されました。ボタンの色も変わっています。 別なボタンの場合、ローディングアイコンの位置が変わります。 オレンジ色のボタンはローディングアイコンだけが強調されるパターンです。 水色のボタンは文字が消えてローディングアイコンだけに変わるパターンです。 最後に紫色。こちらはインジケータ付きで徐々にステータスが100%に近づいていくものです。 丸形の場合でも左から右にステータスが更
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]金属の質感が美しすぎる、スタイルシートで実装されたボタン
