CSS3 hexagonal button with border and rounded corners

Question

I have image and it has very odd shape : flat hexagon with borders and rounded corners. I would like to make it with CSS.
I have tried to make it with CSS so that it can expand dynamicaly for longer text but its not working for me.

Here is the image

Answer 1

CSS :

You can achieve this shape with 2 3d transformed pseudo elements :

div {
  display: inline-block;
  position: relative;
  padding: 20px 50px;
  perspective: 30px;
}
div:after,div:before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%; height: 100%;
  z-index: -1;
  background: orange;
  border: 2px solid darkorange;
  box-sizing: border-box;
}
div:before {
  right: 50%;
  transform-origin: 100% 0;
  transform: rotateY(-10deg);
  border-radius: 10px 0 0 10px;
  border-width: 3px 0 3px 5px;
}
div:after {
  left: 50%;
  transform-origin: 0 0;
  transform: rotateY(10deg);
  border-radius: 0 10px 10px 0;
  border-width: 3px 5px 3px 0;
}
body{text-align:center;}

<div>some text</div><br/><br/>
<div>some longer text</div>

Note that you will need to add the appropriate vendor prefixes to maximize browser support. See canIuse for more information.

---

SVG :

Another alternative is to use an inline svg with the polygon element :

div{
    display:inline-block;
    position:relative;
    padding:20px 50px;
}
svg{
    position:absolute;
    top:0; left:0;
    z-index:-1;
    min-width:100%; min-height:100%;
}

<div class="btn">
    some text
    <svg viewbox="0 0 100 30">
        <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
    </svg>
</div>
<div class="btn">
    some longer text
    <svg viewbox="0 0 100 30">
        <polygon points="2 8 50 2 98 8 98 22 50 28 2 22" stroke-linejoin="round" stroke-width="2" stroke="darkorange" fill="orange" />
    </svg>
</div>