JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="bg">
  <span class="btn"></span>
</div>

CSS

*{box-sizing:border-box;}
body{
  font-size:25px;
}
.bg{
  background:#333;
  width:400px;
  height:400px;
  position:relative;
}
.btn{
  position:absolute;
  display:block;
  width:12.16em;
  height:12.24em;
  top:50%;
  left:50%;
  margin-top:-6.08em;
  margin-left:-6.12em;
  background:#f4a406;
  border-radius:1.5em;
  box-shadow:inset -0.2em 0 .2em rgba(0,0,0,.4), inset .2em 0 .1em rgba(255,255,255,0.4);
}
.btn:after{
  content:"";
  display:block;
  position:absolute;
  border:4.74em solid transparent;
  border-left-color:#fff;
  top:50%;
  left:50%;
  margin-top:-4.74em;
  margin-left:-1.5em;
  transform:scaleX(1.27);
}