3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるようになりました。

うれしいことにCSSを使用したボタンは簡単に生成できるウェブサービスまであります。
border-radiusなどCSS3固有のプロパティなどを知らなくても手軽に装飾ボタンを作れるのです。
いくつか有名どころがあり、まとめ記事などもよく見ますが、今回は実際にサイトに設置するまでを実践してみたいと思います。
驚くほど簡単に設置できます!

ボタンジェネレータで簡単生成

まずはウェブサービスでボタンを生成します。
わたしがおすすめするのは無料で使えて操作性のよい「CSS Button Generator」
角丸+グラデーションに加えてシャドウ付きです。

CSS Button Generatorの使い方

数項目の簡単な指定だけで以下のようなボタンが作成できます。

詳しく見てみる

ツールはほんとうに直感的て説明不要なほどですが、以下に各項目を説明しておきます。

Color Theme

テーマで選択するだけでも十分魅力的なCSSボタン

Color項目ではグラデーションの各パートの色指定ができます。
ちなみにあらかじめColor Themeが用意されていますので、よほどこだわらなければ、ここで選択すれば十分かと思います。
Gradient:グラデーションの位置指定ができます。

Size項目ではサイズに関しての指定します。
Font-Size:文字サイズ
Boder-Radius:角丸の強さ
Boder-Size:枠線の太さ
Height:ボタンの高さ
Width: ボタンの幅

Shadow (text)項目では文字に対するシャドウ効果を指定します。
(Useボタンでエフェクトを使用するか否か選択可能)
Top:縦位置
Left:横位置
Blur-Radius:ぼかし半径

Shadow (button)項目ではボタンに対するシャドウ効果を指定します。
(Useボタンでエフェクトを使用するか否か選択可能)
Top:縦位置
Left:横位置
Blur-Radius:ぼかし半径
Spread-Radius:拡散半径

Text項目には任意のボタンに表示させるテキストを指定します。

サイトへの設置

さあ、お好みのボタンは作成できたでしょうか?
結果のCSSとHTMLタグが出力されますので、あとは自分のサイトに張りつけるだけです。
下記は実際に「CSS Button Generator」より出力されたサンプルです。
このソースをそのまま使用すれば、上記のボタンが設置できます。

CSS

HTML

最近のブラウザであれば、外部スタイルシートやヘッダーにCSSを記述しなくても、body内でhtmlタグと一緒に記述すれば、ボタン表示のチェックができます。
(WordPressの場合はテキストモードで入力のこと)
もちろん、本来はスタイルシートに書くべきなのですが、この方法ならヘッダーカスタマイズ不可の無料ブログなどでも使えますね。

たったこれだけで画像を使ったようなボタンが設置できるのです。
3分どころか、1分あればできそうですね!

webフォントと組み合わてもうひと味!

さらに見栄えをよくするために、もうひとつスパイスを加えてみます。
webフォントと組み合わせてみます。

詳しく見てみる

すでにwebフォントをCSSで定義してあれば、ボタンのスタイルに書体指定のクラスを加えるだけです。
こうなるとこれまでなら画像でしか表現できなかった世界です。
Photoshopなどで製作してGIFなどで出力するという工程を考えるとかなりの時間短縮になると思います。効率重視のアフィリエイトサイトなどでも重宝するのではないでしょうか。

おまけ

その他にも魅力的なCSSボタンが作成できるウェブツールがありますので、2つほど紹介しておきます。

CSS Button Generator/
5つの効果で作る、よく使うCSS3ボタンデザインサンプル集

いかがでしたでしょうか。
かなりクリエイティブな仕上りがあっという間に実現できますので、ぜひ活用してみてください。
ためしにこのサイトのコメント送信ボタンを装飾してみました!

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

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


三 + 4 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">