hail2u.net

二重枠線ボタン

Posted at 2005-04-02T07:40:00+09:00 in Web Design

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

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

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

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

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

追記@2005/04/06

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