Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] Liquid & Color Adjustable CSS Buttons – 横幅可変、色まで可変なCSSボタン

  • Pocket
  • このエントリーをはてなブックマークに追加

テキストの長さによって横幅が可変する角丸ボタン、というのはわりとよく知られたテクニックですが、ここで紹介されてるのはそれに加えて色まで任意に変えられます。ボタンのバックグラウンドに色指定をして、その上にかぶせる形でアルファのあるPNGをテクスチャとして起きます。背景の色指定をCSS側で変更するだけでボタンの色がっ! 汎用性が高くてめっちゃ便利っすねこれ。a:hover指定してやればオンマウス時の動きもつけられそう。上に乗せるテクスチャ部分さえ変えれば見た目の応用も簡単にできますね。早速ローカルの“俺だけの特選素材フォルダ”にDLしておきました。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください