HTML & CSS
Bem, não foi uma tarefa fácil, mas imagno tenha dado certo:
body{
background: gold;
}
#octagon {
width: 100px; height: 50px; background: white; position: relative;
line-height: 45px;
text-align: center;
color: #fff;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 10px solid white;
border-left: 10px solid #eee;
border-right: 10px solid #eee;
width: 80px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 10px solid white;
border-left: 10px solid #eee;
border-right: 10px solid #eee;
width: 80px; height: 0;
}
#octagon #octagon-inner{
width: 96px;
height: 46px;
background: gold;
position: relative;
top: 2px;
left: 2px;
}
#octagon #octagon-inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 10px solid gold;
border-left: 10px solid white;
border-right: 10px solid white;
width: 76px;
height: 0;
}
#octagon #octagon-inner:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 10px solid gold;
border-left: 10px solid white;
border-right: 10px solid white;
width: 76px;
height: 0;
z-index: 10;
}
#border-top:before{
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid gold;
border-right: 10px solid transparent;
width: 5px;
height: 0;
z-index: 15;
}
#border-top:after{
content: "";
position: absolute;
top: 0;
right: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid gold;
width: 5px;
height: 0;
z-index: 15;
}
#border-bottom:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 10px solid transparent;
border-left: 10px solid gold;
border-right: 10px solid transparent;
width: 5px;
height: 0;
z-index: 15;
}
#border-bottom:after{
content: "";
position: absolute;
bottom: 0;
right: 0;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid gold;
width: 5px;
height: 0;
z-index: 15;
}
#octagon:hover #octagon-inner:after{
border-top-color: #dfbc00;
}
#octagon:hover #octagon-inner:before{
border-bottom-color: #dfbc00;
}
#octagon:hover #octagon-inner{
background-color: #dfbc00;
}
<div id="octagon" >
<div id="border-top" ></div>
<div id="octagon-inner" > TESTE </div>
<div id="border-bottom" ></div>
</div>
No exemplo acima você tem um modelo feito completamente em CSS e HTML, sua aplicação não é difícil, entretanto sua manipulação é, quando se fala em customização. Seus cantos não são transparentes, são, no caso, da cor do background do body
. Devido a isso, a impressão.
SVG
body {
background: gold;
}
#buttonRect{
cursor: pointer;
}
#buttonRect:hover > polygon{
fill: #dfbc00;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="buttonRect">
<polygon id="button" points="40,5 130,5 145,20 145,60 130,75
40,75 25,60 25, 20" fill='#FFD700' style="stroke:#fff;stroke-width: 2;" />
<text id="buttonText" x="60" y="45" fill="#fff">TESTE</text>
</g>
</svg>
Já esta solução em svg é de manipulação bem mais simples, pode ser feita por programas de vetor, ou até mesmo algumas aplicações online. E de bem mais fácil customização, a única coisa mais "trabalhosa" será a modificação do tamanho pelas coordenadas do polygon
, o que mesmo fazendo "na mão" não demora muito.
Utilizei o :hover
no <g>
que agrupa todo os elementos do botão, como explico nessa questão isso pode ser feito sem problemas.
No polygon
com o atributo points
especifico as coordenadas de cada ponto que forma o octógono, seguindo esse modelo:
pt1:(x,y) pt2:(x,y) pt3:(x,y)...