WordPressテーマ「メシオプレス」ブログ

CSS3でボタンを作れるジェネレータは探せば色々ありますが、
今回は一番人気(?)の「CSS3 Button Generator」
の使い方をご紹介しておきます。

CSS3ボタンジェネレーター

WordPressの高速化プラグインを使っていると表示されない?

CSS3 Button Generatorは英語表記ですが、直感で操作できると思います。
CSS3 Button Generator

Google Chromeなら翻訳表示できますが、
右側に表示されるCSSコードも翻訳されてしまいますので、
一応、日本語翻訳したものを下記に掲載しておきます。

CSS3ジェネレーター翻訳

右側に生成された「CSSコード」をスタイルシートに貼り付けて、
記事内などに「HTMLコード」を貼り付ければ、無事、CSS3のボタンが表示されます。

・・・と思ったのですが、表示されませんでした。

CSS3を使ったボタン

↑ こんな風に表示されてしまいました。

何やらWordPressの高速化プラグインを使っていると、
CSSの読み込みに影響が出るみたいです。

私は「WP Hyper Response」を使っていましたので、
一旦、無効化したところ、無事表示されるようになりました。
表示されるのを確認してから再度有効化したところ、
WP Hyper Responseを使っていても引き続き表示されるようになりました。

さらに、ロールオーバーと矢印カーソルに対応させる方法

このままではロールオーバーに対応していませんので、
カーソルが上に来た時のボタンのデザインを
CSS3 Button Generatorでもう一つ作ります。

生成されたCSSコードを先ほどと同じようにスタイルシートに貼り付け、
クラス名のあとに下記のように擬似クラスの :hover を付け加えます。

button.css3button:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;

クラス名のところ(css3button)は
最初に作ったボタンと同じにしておきます。

これでロールオーバー対応のボタンになりました。
しかし、カーソルを置いたときに矢印が人差し指に変わらず、
クリックできるのかわかりにくいです。
そこで、:hoverをつけたほうのCSSコードのどこかに

cursor:pointer;

というのを加えてください。
そうすればカーソルが人差し指に変わるようになります。

作成したボタンがこちらです。

参考:緑のボタンのCSSコード

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 15px 30px;
	background: -moz-linear-gradient(
		top,
		#93f065 0%,
		#074f00);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#93f065),
		to(#074f00));
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 0px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.5),
		0px 1px 0px rgba(255,255,255,0.5);
}

参考:オレンジのボタンのCSSコード

button.css3button:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 15px 30px;
	background: -moz-linear-gradient(
		top,
		#e39d24 0%,
		#e61717);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#e39d24),
		to(#e61717));
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 0px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.5),
		0px 1px 0px rgba(255,255,255,0.5);
        cursor:pointer;
}

画像を用意しなくても簡単にボタンをデザインできますので、
是非試してみてください。

●本日のまとめ
CSS3ボタンジェネレーターを使えば、CSS3のことをよくわかっていなくても、
画像を使わないでボタンを簡単にデザインすることができる。
WordPressの高速化プラグインを使っている場合は一旦、無効化してみると良い。

この記事を書いた人

めしお
めしお メシオプレス販売者

めしおさんのめしおさんによるめしおさんのためのWordPressテーマ「メシオプレス」を有料でおすそ分けしています。

コメント

この記事へのコメントはありません。

コメントする


※メールアドレスは公開されません。

オリジナル有料WordPressテーマ好評発売中

メシオプレス02 メシオプレス03