CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS）
2007年7月26日(木) 07:45
コンテンツにボタンを用意する際、フォームのボタン以外にもさまざまな場面で利用する。例えば、ダウンロードリンクをボタンデザインに変更するだけで、ユーザービリティが改善される。綺麗なボタンをCSSとイメージ画像でデザインする方法がoscaralexander.comで解説されている。
簡単なHTMLとCSS記述で実装できる、またデザインは背景用のイメージを用意するだけなので、デザイン変更は簡単に可能。ボタンをクリックした際のイメージを合わせて利用すれば、さらに洗練される。
IE6のBackgroundImageCacheを有効にする
IE6でマウスポインタをボタンに重ねると、一瞬ポインタが処理中にものに変更される。この現象はスタイルシートで背景画像の表示位置など切り替えた場合などに発生する。症状を少しでもやわらげたい場合には、下記のJavaScriptコードで回避できる。
<script type="text/javascript">
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
</script>簡単なCSS記述で本格的なボタンデザインを実装でき、サイトのデザインや用途にあわせて効果的に利用すれば、サイトのユーザビリティを向上できる。サンプルコードを参考に、ユーザーにアピールしたいリンクをボタンデザインに変更してみてはいかがだろうか？
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript （JSValidate）
- CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
- ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
- フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
- 半透明の角まるツールチップを表示するJavaScript （CoolTips）
- JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
- JavaScriptコード圧縮して盗用から守る （packer）
- iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
- 画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
- Ajaxでサクサク動くWebファイルマネージャ （Relay）
- アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
- MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
- HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
- 使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）
- フォトショップで作る80種類のテキストエフェクト集 （photoshoproadmap.com）
- Flashで便利なTweenクラスのわかりやすい解説 （Ｔween Class Easing）
- CSSレイアウト情報をレイヤー表示するブックマーク （XRAY）
- Lightboxのような透過レイヤー表示の実装サンプル （Lightbox Effect）
- CSSデザインで綺麗なボタンを作成する （How to make sexy buttons with CSS）
