二重枠線ボタン

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

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

二重枠線マジック

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

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

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

追記@2005/04/06

ネタ元はStyling Form Widgetsです。URLを探し当てられたので追記してみたり。そのまんまだな。