.btn{ text-align:center; margin:0 auto; } .btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background:#FF4500;/*????*/ color: #FFF; border-bottom: solid 4px #800000; border-radius: 3px; } .btn-square:active { /*?????????*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*????*/ border-bottom: none;/*????*/ } .btn-circle-border-simple4:hover { background: #CD5C5C; } .btn-circle-border-simple1 { display: inline-block; text-decoration: none; color: #9933FF; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: solid 2px #9933FF; text-align: center; overflow: hidden; font-weight: bold; transition: .4s; } .btn-circle-border-simple1:hover { background: #CC99FF; } .btn-circle-border-simple2 { display: inline-block; text-decoration: none; color: #003366; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: solid 2px #003366; text-align: center; overflow: hidden; font-weight: bold; transition: .4s; } .btn-circle-border-simple2:hover { background:#3399FF ; } .btn-circle-border-simple3 { display: inline-block; text-decoration: none; color:#00CC00 ; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: solid 2px #00CC00; text-align: center; overflow: hidden; font-weight: bold; transition: .4s; } .btn-circle-border-simple3:hover { background: #66FF66; } .btn-circle-border-simple4 { display: inline-block; text-decoration: none; color:#8B0000 ; width: 100px; height: 100px; line-height: 100px; border-radius: 50%; border: solid 2px #8B0000; text-align: center; overflow: hidden; font-weight: bold; transition: .4s; } .btn-circle-border-simple4:hover { background: #CD5C5C; }