ボタン

.btn {
	display: inline-block; /* 文中にボタンを配置する場合、親の段落のtext-alignを継承できる */
	width: 300px; /* width:長文は改行する。 min-width:改行しない。  max-width:最大幅を設定。 */
	max-width: 100%; /* 最大幅を親ボックスに依存させる。 */
	padding: 20px 10px;
	background-color: red;
	border: 2px solid transparent;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	color: white;
	font-size: 1.125rem; /*ブラウザのフォントサイズ変更機能を使った設定内容を反映できる */
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover {
	background-color: white;
	border-color: currentColor;  /* 自身または親のcolor */
	color: red;
}