ボタンをデザインするときに気をつけたい11個のポイントまとめ
この記事では、ユーザーインターフェースを作成するときに気をつけたいボタンデザインのポイント11個をまとめてご紹介します。 悪い例と良い例を比較しながら、具体的なボタンデザイン代替案をシンプルなイラストをつかって詳しく見ていきましょう。 1. ボタンの種類ごとに1つのスタイルに制限しよう ウェブサイトやアプリでは、同じアクションタイプに複数のボタンスタイルを使用しているケースがよくあります。使用しているボタンスタイルの数をきちんと把握し、タイプごとに1つのスタイルにまとめてみましょう。 一般的なボタンの種類には、コールトゥーアクション（CTA）、第一プライマリ（Primary）、第二セカンダリー（Secondary）、第三ターシャリ（Tertiary）、成功（Success）、危険（Danger）、リンクなどが挙げられます。 2. イベントの状態を含め、視覚的なフィードバックを提供しよう ボ
Button Switches with Checkboxes and CSS3 Fanciness | Codrops
In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes. Hello everyone! For a while now, I’m having fun with the new CSS properties (CSS3). It’s an incredible playground for creativity and cleverness. I particularly enjoy designing and creating UI elements like buttons, switches, toggles and such. That’s the focus of this tutorial, I’ll show you
Socialite by tmort
View the Project on GitHub tmort/Socialite Download ZIP File Download TAR Ball View On GitHub Socialite v2 Because if you're selling your soul, you may as well do it asynchronously. Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event! Author: David Bushell http://dbushell.com @dbushe
シェアボタンを手軽にカスタマイズ·Sharrre MOONGIFT
Sharrreは各種ソーシャルサービスに対応したシェアボタンのカスタマイズライブラリです。 最近ではソーシャル系サービスが人気とあって、大抵のWebサイトにシェアするためのボタンが設置されるようになっています。しかしサービス側から与えられるボタンをそのまま設置するのでは面白くありません。自分なりのカスタマイズを施したい、そう思う方はSharrreを使ってみましょう。 デモ1。すっきりとしたデザインです。 デモ2。まず集計された数字が表示されています。 マウスオーバーで横に広がります。 デモ3。こちらもまずは集計された数字が出ています。 マウスオーバーで各サービスのシェアボタンが表示されます。 デモ4。Google Chart APIとあわせて円グラフ化するデモです。 デモ5。一気に横に並べています。 デモ6。ボタンが3D表示で格好いいです。Google+だけアイコンがないのがちょっと寂しい
Creating Sleek On/Off Button with CSS3
Using a button is, so far, the preferred way to interact with an electronic stuff; such as the radio, TV, music player, and even a smartphone that has a voice command feature still needs at least one or two physical buttons. Furthermore, in this digital age, the button has evolved in its digital form as well, which makes it more interactive, dynamic and real easy to make, compared to the physical
ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
Crafting Minimal Circular 3D Buttons with CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following post is written by Brandon Pierce. Brandon saw some nicely designed buttons by Wouter on Dribbble and set about building them with CSS. They came out nicely and he agreed to post about the process here. Here’s what we are going to make in this tutorial: View De
Twitter Bootstrap Button Generator | PlugoLabs
PlugoBrowser - TinyMCE / CKEditor Image & File Manager / Uploader TinyMCE Image & File Manager Twitter Bootstrap Button Generator - the easiest way how to set up your buttons based on Twitter Bootstrap in a seconds. The Twitter name, logo, Twitter T, Tweet, and Twitter bird are trademarks of Twitter, Inc. in the United States and other countries. 2012 © Plugo - Czech Republic based webdesign compa
Free Zocial Button Set: Social CSS3 Buttons — Smashing Magazine
The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so their appearance has to be attractive and clear. The idea behind this project was to produce a consi
Sublink Interactive § The SweetiePlus icon set.
Based on the original Sweetie, the aptly-named SweetiePlus replaces the jagged edges with clean and simple shapes, but holds onto the adorable attitude. Download Now FREE Icons SweetiePlus is currently made up of 120 icons, perfect for use in websites or apps. Sizes 24×24 16×16 Formats PNG Keep Up-to-date If you’d like to get an email when the set is updated, sign up below. You will not be emailed
CSS Social Buttons - Web Designer Wall
I’m proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it is one master stylesheet that contains various design s
いいねフィッシングはこうして起こる？をデモする·Facebook like-trap MOONGIFT
Facebook like-trapはダミーのマウスカーソルを表示していいねボタンをダミーで押させるデモソフトウェアです。 Facebookのいいねボタンを悪用したいいねフィッシングという行為が問題視されていますが、その実例といっても良いような動作をデモしてくれるのがFacebook like-trapです。カーソルが二つ現れて、目的のボタンを押すと見せかけていいねボタンをクリックさせます。 マウスポインタが二つ表示されているのが分かるでしょうか。 ボタンを押したつもりがいいねボタンを押したことになってしまいます。 通常、iframeの上にはフェイクのカーソルは出せないそうなのですが、透明なdivタグをiframeの上に重ねることで実現しているそうです。 Facebook like-trapはJavaScript/CSS製のソフトウェア（ソースコードは公開されていますがライセンスは明記され
ボタンの押し込みをCSSで表現する
時代は:active！ タッチ・デバイスに:hoverなどない！ みたいになりつつあるような気がしないでもないので、ボタンの押し込みの表現を色々考えている。とは言ってもタッチ・デバイスでは:active擬似クラスもいまいちアレなのでまだあんまり意味なかったりするけど。三周回ってデフォルト使えみたいな感じになっている節もある。ですよねー。 Demo: Pixel Pushing padding 一番のメジャーで安定のクオリティー。 .test { padding-top: 10px; padding-bottom: 10px; } .test:active { padding-top: 11px; padding-bottom: 9px; } 欠点はpx単位でpaddingプロパティーを制御せざるを得ないのでスケーラブルにしづらくなること。 position ボタンのテキストだけでなく全体を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://t.co/HmiEaAhwQe
Firefox Marketplace Animated Buttons
https://www.webstuffshare.com/2012/05/css3-pictogram-button/
jobyj.in
Red Team Design
http://indigonote.com/2011/09/14/original-like-button/
Ui Parade | Just another WordPress site