前の記事 ≪:無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」
次の記事 ≫:押してもらいやすそうな綺麗なボタンっぽいソーシャルアイコン集

CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル

2010年02月02日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Pretty CSS3 buttons | Papermashup.com

CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル。
次のようなボタンを作成するソースと解説が公開されています。

CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル 1

各種ボタンのカラーも自由自在です。

CSS3で影付き角丸グラデーション付きのボタンを作成するサンプル 2

フォントにも微妙に影がついているところもいいですね。
更に、Click によってボタンの色が変わり、押下された感じがでるように下にポコっと窪んでくれます。
関連の記事検索:CSS, 角丸, Webデザイン
スポンサード リンク

By.KJ : 2010年02月02日 10:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)