JSFiddle - React, Tailwind, and code Playground

by kingofturnip

HTML

<button class="downloadBTN">
png
<span class="downloadPlus">+</span>
</button>

CSS

.downloadBTN{
  padding:16px;
  text-transform: uppercase;
  display: block;
  background-color:#ffffff;
  text-align: inherit;
  border:1px solid #232323;
  font-size:15px;
}

.downloadPlus{
        color: #ffffff;
    position: relative;
    right: 0;
    top: 0;
    /* width: 15px; */
    height: 100%;
    z-index: 1;
    /* display: inline-block; */
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    overflow: hidden;
    vertical-align: middle;
    /* display: block; */
    background-color: black;
    text-align: center;
    /* padding: 100%; */
}

.downloadPlus:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  /* right: 0; */
  background-color:#0f2741;
  width:15px;
  height: 100%;
}