角丸の幅可変ボタンを作ろうと思うと割と面倒くさいんですけど さらにクロスフェードさせたい(実質クロスフェードではないんですが) という欲望に負けてやってみました。 完成サンプル サンプルファイルのダウンロード とりあえずMacでしか確認してないのでIEとかどうなるかわかりません。 IE6で崩れてたのでCSSを修正しました。 角丸可変ボタンのHTML そもそも角丸幅可変のボタンを作ろうと思うと要素の入れ子は避けられません。 下のような感じになります。 SUBMIT ムダな要素はJSで… でもいいですけど、ここはデザインに直接影響するところなので HTML+CSSだけでやったほうがいいです。 中のSPANはあきらめてください。僕は気にしてません。 角丸可変ボタンのCSS これにCSSを書いていくと たぶん以下みたいな感じになると思います。 ボタンは2つ以上並ぶ事も想定します。 使う画像は次の2