CSSだけで6角形ボタンを作ってみた

cssだけで6角形ボタンを作りたかったので、調べてみました。

色々方法はあると思いますが、今回はこちらのサイトを参照しながら、少しカスタマイズしてみることに。

参考にさせて頂いたサイト（吹き出し）
http://morobrand.net/mororeco/css/css-shape/#s27

 

●6角形その1

【html】

<p class="sampleBtn"><a href="#">菱形サンプル</a></p>

【CSS】

.sampleBtn{
text-align:center;
width:200px;
margin:50px auto;
}
.sampleBtn a{
display:block;
color:#FFF;
width: 100%;
height: 60px;
background: #000;
position: relative;
}
.sampleBtn a:before {
content:"";
position: absolute;
right: 100%;
top: 0px;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 35px solid #000;
border-bottom: 30px solid transparent;
}
.sampleBtn a:after{
content:"";
position: absolute;
left: 100%;
top: 0px;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 35px solid #000;
border-bottom: 30px solid transparent;
}
.sampleBtn a:hover{
background:#666;
text-decoration:none;
}
.sampleBtn a:hover:before{
border-right: 35px solid #666;
}
.sampleBtn a:hover:after{
border-left: 35px solid #666;
}

【サンプル】

菱形サンプル

 

●6角形その2

【html】

<p class="sampleBtn2"><a href="#">菱形サンプル2</a></p>

【css】

.sampleBtn2{
text-align:center;
width:200px;
margin:50px auto;
}
.sampleBtn2 a{
display:block;
color:#FFF;
width: 100%;
height: 60px;
background: #000;
position: relative;
}
.sampleBtn2 a:before {
content:"";
position: absolute;
left:0;
top: -30px;
width: 0;
height: 0;
border-bottom: 30px solid #000;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
.sampleBtn2 a:after{
content:"";
position: absolute;
left:0;
bottom: -30px;
width: 0;
height: 0;
border-top: 30px solid #000;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
.sampleBtn2 a:hover{
background:#666;
text-decoration:none;
}
.sampleBtn2 a:hover:before{
border-bottom: 30px solid #666;
}
.sampleBtn2 a:hover:after{
border-top: 30px solid #666;
}

【サンプル】

菱形サンプル2

 

今回はリンクボタンにしていますが、ボタンでなくても流用は出来ると思います。