JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border-shadow">my button</div>
<div class="border-shadow border-shadow--gradient">my gradient button</div>

SCSS

.border-shadow {
    position: relative;
    display: inline-block;
    border: 3px solid #F01476;
    padding: 20px;
    background-color: transparent;
    
    &:after {
      content: '';
      position: absolute;
      top: -3px;
      right: -3px;
      bottom: -3px;
      left: -3px;
      border: 3px solid #F01476;
      filter: blur(2px);
      transform: translateY(5px);
    }
}

.border-shadow--gradient {
  &, &:after {
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23F01476'/><stop offset='1' stop-color='%23F3590F'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;
  }
}





body {
  padding: 25px;
}

div {
  margin-right: 20px;
}