JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hex Button</title>
</head>
<body>
  <div id="hex"><p>button</p><p>text</p></div>
</body>
</html>

CSS

#hex {
  background-color:green;
  width:100px;
  height:100px;
  float:middle;
  display:block;
}

#hex::before {
  content:"";
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-right:30px solid red;
  float:left;
  margin:auto;
}

#hex::after {
  content:"";
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:30px solid red;
  float:right;
}