ボタンで作るモグラのキャラ(CSS)
背景のCSS(共通)
.nest {
width: 120px;
height: 120px;
margin : 30px 30px 0px 30px;
background-color: khaki;
border-style: solid;
border-color: brown;
border-width: 0px 0px 20px 0px;
overflow : hidden;
}
なし
.mole_a {
width: 65px;
height: 130px;
font-size : 15pt;
margin : 0px 27px 0px 27px;
}
.mole_b {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 0px 0px; /* 角丸 */
margin : 0px 27px 0px 27px;
}
.mole_c {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 0px 0px;
background : chocolate; /* 茶色 */
margin : 0px 27px 0px 27px;
}
.mole_d {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 0px 0px;
background : chocolate;
border : 0; /* 枠線なし */
margin : 0px 27px 0px 27px;
}
.mole_e {
width: 65px;
height: 130px;
font-size : 15pt;
border-radius : 30px 30px 0px 0px;
background : chocolate;
border : 0;
outline : none; /* クリック時のアウトラインなし */
margin : 0px 27px 0px 27px;
}