.button1 {
display : inline-block;
font-size : 12pt;/* 文字サイズ */
text-align: center;/* 文字位置 */
cursor: pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background: #cccccc; /* 背景色 */
color : #000000; /* 文字色 */
line-height : 1em; /* 1行の高さ*/
transition: .3s; /* なめらか変化 */
border: 2px solid #cccccc;/* 枠の指定 */
}
.button1:hover {
color : #cccccc; /* 背景色 */
background: #000000; /* 文字色 */
}

.button2 {
display : inline-block;
font-size : 12pt;/* 文字サイズ */
text-align: center;/* 文字位置 */
cursor: pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background: #cccccc; /* 背景色 */
color : #000000; /* 文字色 */
line-height : 1em; /* 1行の高さ*/
transition: .3s; /* なめらか変化 */
border: 2px solid #cccccc;/* 枠の指定 */
}
.button2:hover {
color : #cccccc; /* 背景色 */
background: #000000; /* 文字色 */
}

.button3 {
display : inline-block;
font-size : 12pt;/* 文字サイズ */
text-align: center;/* 文字位置 */
cursor: pointer; /* カーソル */
padding : 12px 12px; /* 余白 */
background: #d1a4ff; /* 背景色 */
color : #000000; /* 文字色 */
line-height : 1em; /* 1行の高さ*/
transition: .3s; /* なめらか変化 */
border: 2px solid #cccccc;/* 枠の指定 */
}
.button3:hover {
color : #d1a4ff; /* 背景色 */
background: #000000; /* 文字色 */
}