Create octagonal border button using html and css only

Question

I need to create a button with the edges in octagonal as in the example attached but did not succeed.

I need you to have a white border and the background to be free so you can change color when applying the :hover.

I count on your help, thank you.

Answer 1

HTML & CSS

Well, it wasn’t an easy task, but it worked:

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>

In the example above you have a template made completely in CSS and HTML, your application is not difficult, however its manipulation is, when it comes to customization. Its corners are not transparent, are, in this case, the background color of the body. Because of this, the impression.

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>

But this svg solution is much simpler to handle, can be done by vector programs, or even some online applications. And much easier customization, the only thing more "laborious" will be the modification of the size by the coordinates of polygon, what even doing "in hand" does not take long.

I used the :hover in the <g> grouping together all the button elements, as I explain in that matter this can be done without problems.

In the polygon with the attribute points I specify the coordinates of each point that forms the octagon, following this model:

pt1:(x,y) pt2:(x,y) pt3:(x,y)...

Answer 2

Try with 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>

In that other answer I explained what that means M (Move To) in widget <path>, also left an image explaining how the command works.

It wasn’t clear what you meant by "set the fund free," so I chose to leave the bottom of the path transparent and make use of only the edges (stroke), so it will use the background color of the parent element.

If you need to change the background from the button, just change the property fill with the colour of your choice, such as:

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

Recalling that the :hover works normally when applied to an SVG, including transition properties:

.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://answall.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>