JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<button>Small</button>
<button>Read more</button>
<button>Larger text here</button>
<button>Very large text here</button>

SCSS

button {
  --bg: transparent;
  --border: black;
  border: solid var(--border);
  border-width: 1px 0 1px 1px;
  display: inline-grid;
  grid-template: 0 auto 0 / auto;
  align-items: center;
  padding-left: 1em;
  gap: 1em;
  position: relative;
  background: var(--bg);
  
  &::before {
    content: '';
    grid-area: 1 / 1 / 2 / 3;
  }
}

button::after {
  content: '';
  grid-area: 1 / 2 / 4 / 3;
  aspect-ratio: .5;
  align-self: stretch;
  background: blue;
  xbackground: linear-gradient(to top right, var(--bg) calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px)) 0 0 / 100% 50% no-repeat,
              linear-gradient(to bottom right, var(--bg) calc(50% - 1px), var(--border) 50%, transparent calc(50% + 1px)) 0 100% / 100% 50% no-repeat;
}

button:hover {
  --bg: orange;
  --border: orange;
  color: white;
}