2005-04-02

二重枠線ボタン

どこかで「フォーム・ボタンのボーダーにdoubleを指定するとカッコイイぜ！」みたいなのを見つけて、1週間ほど前から使ってみてたりするわけですが、これはなかなか良い気がする。とりあえず憶えておくと即戦力になります。

doubleだとカッコイイとは言っても、実は単にdoubleにすれば良いわけではないようで、四辺のborderを別個に指定し、うまいことベベルっぽくしないとダメな感じ。

僕はシャイで口下手(エイプリルフールは過ぎたのにネタっぽい)なので、言葉では説明できないため、デフォルトのボタンからCSSのルールを増やしていってかっこよさげなボタンを作るプログレスをHTMLでまとめてみました。

borderのサイズはいろいろ試してみればわかりますが、3pxじゃないとうまいことまとまってくれません。

フォーム部品のスタイリングは困ったものなので、こういった即戦力なテクニックを憶えておくとなかなか便利。前景色と背景色以外指定するなみたいな感じではありますが。