CSSだけで作る伸縮ボタン

WordPress:2.5.1
jQuery:1.2.6
Browser:FF3,IE6,Safari3,Opera9
 
Add this:

横幅がキャプション(リンクテキスト)に応じて伸縮するボタンを、CSSのみ・ボタン用画像1枚だけ、で実現する方法をまとめます。これは、海外で scalable button,fancy button,sexy button,sliding doors 等と呼ばれているテクニックです。簡単に言うと「a タグに span タグを入れ子にして、それぞれの背景でボタンの左端からと右端からを表示する」となります。言うのは簡単ですが、クロスブラウザで実現するには細かなテクニックが必要です。さらに、ボタンの状態に合わせてボタンの画像を変更するテクニックも説明します。

続きを読む »