JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<a href="#"><span><span><span>Modus Games</span></span></span></a>

CSS

body {
  padding: 4rem;
  background: url("https://afterimagegame.com/wp-content/themes/afterimage/images/bg-header_fallback.png.webp") center center no-repeat;
}

a.styled-button {
  border-top: 2px solid rgba(255, 203, 182, 0.6);
  border-bottom: 2px solid rgba(255, 203, 182, 0.6);
  padding-top: 2px;
  padding-bottom: 2px;
}

a.styled-button span {
  border-top: 2px solid #A24343;
  border-bottom: 2px solid #A24343;
  padding-top: 2px;
  padding-bottom: 2px;
}

a.styled-button span span {
  border-top: 1px solid #EF4852;
  border-bottom: 1px solid #EF4852;
  padding-top: 1px;
  padding-bottom: 1px;
}

a.styled-button span span span {
  background: rgba(255, 203, 182, 0.6);
  padding: 10px 45px;
  text-align: center;
  border-top: 2px solid rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  display: block;
  max-width: 268px;
}