PG WORKS

PHPやLinuxサーバなどのノウハウや、便利なツールを紹介していきます。

CSSだけでハイクオリティーなボタンを作れるサイトを紹介

CSSだけでボタンが作れるサイトを紹介。

CSS Button Builder
f:id:zen6a:20150825205548p:plain

ボタンの色の変更やテキストはもちろん、ボタンの影や丸みなど簡単に変更できて、
即プレビューに反映されるため、イメージ通りのボタンが簡単に作れます。

どんな色にしたらいいか迷ったときは、「CSSボタンのデザインを選択」を選択するだけで、下記のパターンが表示されます。

f:id:zen6a:20150825222128p:plain

また「CSSカラーパターンを選択」を選択すると、0~20までのグラデーションを確認することができます。ボタンのデザインが決まったら、スタイルシートソースコードをコピーして自分のサイトに貼り付けし、ボタンを表示させたい箇所に、下記のタグを貼り付けます。

サンプルで作成してみました。

ボタン表示サンプル

<style type="text/css">
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background-color:#3d94f6;
	-webkit-border-top-left-radius:16px;
	-moz-border-radius-topleft:16px;
	border-top-left-radius:16px;
	-webkit-border-top-right-radius:16px;
	-moz-border-radius-topright:16px;
	border-top-right-radius:16px;
	-webkit-border-bottom-right-radius:16px;
	-moz-border-radius-bottomright:16px;
	border-bottom-right-radius:16px;
	-webkit-border-bottom-left-radius:16px;
	-moz-border-radius-bottomleft:16px;
	border-bottom-left-radius:16px;
text-indent:0px;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:Trebuchet MS;
	font-size:19px;
	font-weight:bold;
	font-style:normal;
height:65px;
	line-height:65px;
width:200px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #1570cd;
}.classname:hover {
	background-color:#1e62d0;
}.classname:active {
	position:relative;
	top:1px;
}</style>

<!--ボタンを表示させたい箇所に記述-->
<a href="#" class="classname">PG WORKS</a>

自分のおすすめなボタンを作って、サイトに実装してみましょう。