2

Preciso criar um botão com as bordas em octogonais como no exemplo anexado porém não obtive êxito.

Preciso que tenha uma borda branca e que o fundo seja livre para que possa mudar de cor quando aplicar o :hover.

Conto com a ajuda de vocês, obrigado.

inserir a descrição da imagem aqui

4
  • ja tentou usar o border-radius?
    – user37612
    19/01/2016 às 21:26
  • O border-radius deixa as bordas redondas, preciso deixar elas retas, da mesma forma que esta na imagem do post. 19/01/2016 às 21:31
  • que treta hein ... voce poderia criar a borda em uma imagem png. agora em html5 e css3 eu nao sei se tem essa funcão
    – user37612
    19/01/2016 às 21:37
  • Chegou a dar uma olhada na propriedade "border-image-source" do CSS3? Eu usaria ela como ponto de partida e embutiria um svg com o desenho dentro do css. 19/01/2016 às 21:45

2 Respostas 2

3

Tente com SVG:

body { background-color: #FBA323 }

.svg-button path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 2px
}

.svg-button tspan {
  fill: #fff
}
<svg class='svg-button'>
  <a xlink:href='#'> <!-- link do recurso que será chamado ao clicar -->
  <g>
    <path d='M0 10 10 0 190 0 200 10 200 50 190 60 10 60 0 50 Z'/>
    <text y='35'>
      <tspan x='60'>Ver obras</tspan>
    </text>
    </g>
  </a>
</svg>

Nessa outra resposta expliquei o que significa aquele M (Move To) no elemento <path>, também deixei uma imagem explicando como funciona o comando.

Não ficou claro o que você quis dizer com "deixar o fundo livre", então optei por deixar o fundo do path transparente e fazer uso somente das bordas (stroke), assim ele utilizará a cor de fundo do elemento pai.

Se precisar alterar o background do botão, basta alterar a propriedade fill com a cor da sua preferência, como:

.svg-button path {
  fill: red; /* Vermelho ficaria melhor?! :) */
  stroke: #fff;
  stroke-width: 2px
}

Lembrando que o :hover funciona normalmente quando aplicado à um SVG, inclusive as propriedades de transição:

.svg-button {
  height: 62px;
  width: 202px
}

.svg-button path {
  fill: #3498db;
  stroke: #2980b9;
  stroke-width: 2px;
  transition: all 300ms ease-in
}

.svg-button tspan {
  fill: #fff
}


/* Hover! */
.svg-button:hover path {
  fill: #1abc9c;
  stroke: #000
}
<svg class='svg-button'>
  <a xlink:href='http://pt.stackoverflow.com'>
  <g>
    <path d='M0 10 10 0 190 0 200 10 200 50 190 60 10 60 0 50 Z'/>
    <text y='35'>
      <tspan x='45'>StackOverflow</tspan>
    </text>
    </g>
  </a>
</svg>

3

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)...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .