ボタン二つ横ならびね inline-block 可変幅block要素
HTML
<div class="btns">
<div class="btn sample-btn"><a href="#">ボタン</a></div>
<div class="btn sample2-btn"><a href="#">ボタン２</a></div>
</div>
CSS
.btns {
text-align: center;
margin:30px 0 20px;
}
.btn {
display: inline-block;
text-align: center;
padding:10px 40px 5px;
font-size: 16px;
font-weight:normal;
}
.btn a{
text-decoration:none;
}
.btn a:hover{
text-decoration:none;
}
.sample-btn {
margin:0px 30px;
color: #fff;
background-color: #f5b5b5;
box-shadow: #e69090 0px 2px 0px 0px;
-webkit-box-shadow: #e69090 0px 2px 0px 0px;
-moz-box-shadow: #e69090 0px 2px 0px 0px;
border-radius: 5px; /* CSS3草案 */
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
}
.sample-btn a{
margin: 0 auto;
color: #fff;
}
.sample2-btn {
margin:0px 30px;
color: #777777;
background-color: #dcdcdc;
box-shadow: #777777 0px 2px 0px 0px;
-webkit-box-shadow: #777777 0px 2px 0px 0px;
-moz-box-shadow: #777777 0px 2px 0px 0px;
border-radius: 5px; /* CSS3草案 */
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */ }
.sample2-btn a{
color: #777777;
}
