0

CSSで丸いボタンを装飾してみる

CSSで丸いボタンを装飾してみる

CSSの「border-radiusプロパティ」を使用して、色々な丸いボタンを作ってみたいと思います。まずはデモサンプルを確認してみてください。

デモサンプル




単色ボタン

単色ボタン

HTML

CSS

枠線点線ボタン

枠線点線ボタン

HTML

CSS

グラデーションボタン

グラデーションボタン

HTML

CSS

グラデーションボタン(色付き)

グラデーションボタン(色付き)

HTML

CSS

グラデーションボタン1(色付き/テキスト影付き)

グラデーションボタン1(色付き/テキスト影付き)

HTML

CSS

グラデーションボタン2(色付き/テキスト影付き)

グラデーションボタン2(色付き/テキスト影付き)

HTML

CSS

単色ボタン(凹み)

単色ボタン(凹み)

HTML

CSS

単色ボタン(うっすら凸)

単色ボタン(うっすら凸)

HTML

CSS

単色ボタン(濃い凹み)

単色ボタン(濃い凹み)

HTML

CSS

デモサンプル

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

mororeco > CSS > CSSで丸いボタンを装飾してみる