HTML CSS JavaScript PHP
簡単シンプルで実用的なボタンを作る

color code

<button>タグを使用してボタンを作る。

①基本的なボタン

まずは最小限の記述でボタンを作成してみましょう。
HTML
<button>ボタン</button>
これだけの記述でボタンを作ることができます。

②CSSで装飾（影付き、角丸、マウスオンで色変更）

それではCSSを使って簡単にボタンを装飾してみましょう。
HTML
<button class="button1" type="button">ボタン</button>
CSS
.button1 {
	width: 200px;				/*ボタンの幅*/
	height: 40px;				/*ボタンの高さ*/
	background-color: #4793f0;		/*ボタンの背景色*/
	color: #ffffff;				/*文字の色*/
	font-size: 20px;			/*文字のサイズ*/
	font-weight: normal;			/*文字の太さ*/
	border-radius: 5px;                     /*角丸の半径*/
	box-shadow: 2px 2px 4px 0px #000000;    /*影の大きさ、ぼかし、広がり、色*/
	border: none;				/*ボタンの枠線*/
	outline: none;                          /*クリック時の枠線なし*/
	transition: 0.3s;			/*なめらかに反転*/
}
.button1:hover {
	background-color: #68abfd;         	/*マウスオン時の背景色*/
	color: #ffffff;				/*マウスオン時の文字の色*/
	cursor: pointer;             		/*マウスオン時に手のカーソル*/
}
.button1:active {
	transform: translate(0,1px);		/*クリック時の動作*/
}

③ボタンのカスタマイズ　CSSを自動生成します。

属性説明値注釈
width 横幅を指定 px
height 高さを指定 px
background-color ボタンの色
color 文字の色
font-size 文字サイズ px
font-weight 文字の太さ normal（標準） bold（太字）
border-radius 角丸の半径 px
box-shadow 影の設定 横距離  px
縦距離  px
ぼかし  px
広がり  px
影の色 
マウスオン(hover)
background-color		 ボタンの色
マウスオン(hover)
color		 文字の色
カスタマイズされたCSS
.button1 {
	width: 200px;
	height: 40px;
	background-color: #4793f0;
	color: #ffffff;
	font-size: 20px;
	font-weight: normal;
	border-radius: 5px;
	box-shadow: 2px 2px 4px 0px #000000;
	border: none;
	outline: none;
	transition: 0.3s;
}
.button1:hover {
	background-color: #68abfd;
	color: #ffffff;
	cursor: pointer;
}
.button1:active {
	transform: translate(0,1px);
}
実際にボタンを設置する場合の、実用的で簡単シンプルなボタンの作り方をご紹介しましたが、 他にも色々と細かな設定項目があります。

④JavaScript
onClick属性を使ってリンクボタン、戻るボタンを作る。

buttonタグの中に以下の記述を追加することで、「リンク先URL」に遷移させることができます。
onclick="location.href='リンク先のURL'"
HTML
<button class="button1" type="button" onclick="location.href='https://color.ty-factory.com'">COLOR CODE</button>
別ウィンドウ（新しいタブ）でリンク先を開くには、onClick属性にwindow.open()を追加します。
onclick="window.open().location.href='リンク先のURL'"
HTML
<button class="button1" type="button" onclick="window.open().location.href='https://color.ty-factory.com'">COLOR CODE</button>
※buttonタグをaタグで囲んでリンクを張ることは、HTMLとしては正しくありません。 ブラウザによっては動作するかもしれませんが、バグの原因にもなりますのでlocation.hrefを使用しましょう。
HTML（正しくないリンク方法）
<a href="リンク先URL">
   <button class="button1">リンクボタン</button>
</a>
戻るボタンを作るときはonclick属性にhistory.back()を記述します。
onclick="history.back()"
HTML
<button class="button1" type="button" onclick="history.back()">戻る</button>