<body>
  <div class="wrapper">
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 508 508" style="enable-background:new 0 0 508 508;fill: red;" xml:space="preserve">
        <polygon style="fill:#FFFFFF;" points="116.4,288.987 254,407.087 391.6,288.987 391.6,82.388 116.4,82.388 " />
        <polygon style="fill:#FFC10D;" points="144.6,274.587 144.6,110.688 363.4,110.688 363.4,274.587 254,369.587 " />
        <g>
          <path style="fill:#000000;" d="M180.8,151.588h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,151.588,180.8,151.588z" />
          <path style="fill:#000000;" d="M180.8,220.887h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,220.887,180.8,220.887z" />
          <path style="fill:#000000;" d="M341.3,275.987c0-7.8-6.3-14.1-14.1-14.1H180.8c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1h146.4   C335,290.087,341.3,283.787,341.3,275.987z" />
          <path xmlns="http://www.w3.org/2000/svg" style="fill:#000000;" d="M503.1,209.188l-83.2-71.4v-69.5c0-7.8-6.3-14.1-14.1-14.1h-83.3l-59.3-50.8   c-5.3-4.5-13.1-4.5-18.4,0l-59.2,50.8h-83.3c-7.8,0-14.1,6.3-14.1,14.1v69.4l-83.3,71.5c-3.3,2.7-4.6,6.4-4.9,10.7v274   c0,7.8,6.3,14.1,14.1,14.1h479.8c7.8,0,14.1-6.3,14.1-14.1v-274C507.9,215.488,506.2,211.988,503.1,209.188z M419.8,174.887   l52.4,44.9l-52.4,44.9V174.887z M254,32.688l25.1,21.5h-50.2L254,32.688z M116.4,82.388h275.2v206.6L254,407.087l-137.6-118.1   V82.388z M88.2,174.887v89.9l-52.4-44.9L88.2,174.887z M28.2,399.887h21.5c7.8,0,14.1-6.3,14.1-14.1c0-7.8-6.3-14.1-14.1-14.1H28.2   v-21.8h39.1c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H28.2v-71.1l123.9,106.3l-123.9,106.3V399.887z M52.2,479.787   l121.6-104.3l71,60.9c5.1,4.6,13.8,4.3,18.4,0l71-60.9l121.6,104.3H52.2z M479.8,463.188l-124-106.3l123.9-106.3v212.6H479.8z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#ff0000;" points="479.8,463.188 479.8,250.588 355.8,356.887  " />
          <path style="fill:#ff0000;" d="M455.8,479.787l-121.6-104.3l-71,60.9c-4.6,4.3-13.3,4.6-18.4,0l-71-60.9l-121.6,104.3H455.8z" />
          <path style="fill:#ff0000;" d="M28.2,250.588v71.1h39.1c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v21.8h21.5   c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v63.3l123.9-106.3L28.2,250.588z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#FFFFFF;" points="472.2,219.887 419.8,174.887 419.8,264.787  " />
          <polygon style="fill:#FFFFFF;" points="279.1,54.188 254,32.688 228.9,54.188  " />
          <polygon style="fill:#FFFFFF;" points="88.2,174.887 35.8,219.887 88.2,264.787  " />
        </g>
      </svg><br><a role="button" class="button-style" href="[link]">Sign Up</a><br>
      <h2>Good</h2><code>role="button"</code>
    </div>
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 508 508" style="enable-background:new 0 0 508 508;fill: red;" xml:space="preserve">
        <polygon style="fill:#FFFFFF;" points="116.4,288.987 254,407.087 391.6,288.987 391.6,82.388 116.4,82.388 " />
        <polygon style="fill:#FFC10D;" points="144.6,274.587 144.6,110.688 363.4,110.688 363.4,274.587 254,369.587 " />
        <g>
          <path style="fill:#000000;" d="M180.8,151.588h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,151.588,180.8,151.588z" />
          <path style="fill:#000000;" d="M180.8,220.887h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,220.887,180.8,220.887z" />
          <path style="fill:#000000;" d="M341.3,275.987c0-7.8-6.3-14.1-14.1-14.1H180.8c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1h146.4   C335,290.087,341.3,283.787,341.3,275.987z" />
          <path xmlns="http://www.w3.org/2000/svg" style="fill:#000000;" d="M503.1,209.188l-83.2-71.4v-69.5c0-7.8-6.3-14.1-14.1-14.1h-83.3l-59.3-50.8   c-5.3-4.5-13.1-4.5-18.4,0l-59.2,50.8h-83.3c-7.8,0-14.1,6.3-14.1,14.1v69.4l-83.3,71.5c-3.3,2.7-4.6,6.4-4.9,10.7v274   c0,7.8,6.3,14.1,14.1,14.1h479.8c7.8,0,14.1-6.3,14.1-14.1v-274C507.9,215.488,506.2,211.988,503.1,209.188z M419.8,174.887   l52.4,44.9l-52.4,44.9V174.887z M254,32.688l25.1,21.5h-50.2L254,32.688z M116.4,82.388h275.2v206.6L254,407.087l-137.6-118.1   V82.388z M88.2,174.887v89.9l-52.4-44.9L88.2,174.887z M28.2,399.887h21.5c7.8,0,14.1-6.3,14.1-14.1c0-7.8-6.3-14.1-14.1-14.1H28.2   v-21.8h39.1c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H28.2v-71.1l123.9,106.3l-123.9,106.3V399.887z M52.2,479.787   l121.6-104.3l71,60.9c5.1,4.6,13.8,4.3,18.4,0l71-60.9l121.6,104.3H52.2z M479.8,463.188l-124-106.3l123.9-106.3v212.6H479.8z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#56ACE0;" points="479.8,463.188 479.8,250.588 355.8,356.887  " />
          <path style="fill:#56ACE0;" d="M455.8,479.787l-121.6-104.3l-71,60.9c-4.6,4.3-13.3,4.6-18.4,0l-71-60.9l-121.6,104.3H455.8z" />
          <path style="fill:#56ACE0;" d="M28.2,250.588v71.1h39.1c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v21.8h21.5   c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v63.3l123.9-106.3L28.2,250.588z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#FFFFFF;" points="472.2,219.887 419.8,174.887 419.8,264.787  " />
          <polygon style="fill:#FFFFFF;" points="279.1,54.188 254,32.688 228.9,54.188  " />
          <polygon style="fill:#FFFFFF;" points="88.2,174.887 35.8,219.887 88.2,264.787  " />
        </g>
      </svg><br><button type="button" class="button-style">Sign up</button>
      <h2>Better</h2><code>&lt;button&gt;</code>
    </div>
    <div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 508 508" style="enable-background:new 0 0 508 508;fill: red;" xml:space="preserve">
        <polygon style="fill:#FFFFFF;" points="116.4,288.987 254,407.087 391.6,288.987 391.6,82.388 116.4,82.388 " />
        <polygon style="fill:#FFC10D;" points="144.6,274.587 144.6,110.688 363.4,110.688 363.4,274.587 254,369.587 " />
        <g>
          <path style="fill:#000000;" d="M180.8,151.588h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,151.588,180.8,151.588z" />
          <path style="fill:#000000;" d="M180.8,220.887h146.4c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H180.8   c-7.8,0-14.1,6.3-14.1,14.1S173,220.887,180.8,220.887z" />
          <path style="fill:#000000;" d="M341.3,275.987c0-7.8-6.3-14.1-14.1-14.1H180.8c-7.8,0-14.1,6.3-14.1,14.1s6.3,14.1,14.1,14.1h146.4   C335,290.087,341.3,283.787,341.3,275.987z" />
          <path xmlns="http://www.w3.org/2000/svg" style="fill:#000000;" d="M503.1,209.188l-83.2-71.4v-69.5c0-7.8-6.3-14.1-14.1-14.1h-83.3l-59.3-50.8   c-5.3-4.5-13.1-4.5-18.4,0l-59.2,50.8h-83.3c-7.8,0-14.1,6.3-14.1,14.1v69.4l-83.3,71.5c-3.3,2.7-4.6,6.4-4.9,10.7v274   c0,7.8,6.3,14.1,14.1,14.1h479.8c7.8,0,14.1-6.3,14.1-14.1v-274C507.9,215.488,506.2,211.988,503.1,209.188z M419.8,174.887   l52.4,44.9l-52.4,44.9V174.887z M254,32.688l25.1,21.5h-50.2L254,32.688z M116.4,82.388h275.2v206.6L254,407.087l-137.6-118.1   V82.388z M88.2,174.887v89.9l-52.4-44.9L88.2,174.887z M28.2,399.887h21.5c7.8,0,14.1-6.3,14.1-14.1c0-7.8-6.3-14.1-14.1-14.1H28.2   v-21.8h39.1c7.8,0,14.1-6.3,14.1-14.1s-6.3-14.1-14.1-14.1H28.2v-71.1l123.9,106.3l-123.9,106.3V399.887z M52.2,479.787   l121.6-104.3l71,60.9c5.1,4.6,13.8,4.3,18.4,0l71-60.9l121.6,104.3H52.2z M479.8,463.188l-124-106.3l123.9-106.3v212.6H479.8z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#2ec4b6;" points="479.8,463.188 479.8,250.588 355.8,356.887  " />
          <path style="fill:#2ec4b6;" d="M455.8,479.787l-121.6-104.3l-71,60.9c-4.6,4.3-13.3,4.6-18.4,0l-71-60.9l-121.6,104.3H455.8z" />
          <path style="fill:#2ec4b6;" d="M28.2,250.588v71.1h39.1c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v21.8h21.5   c7.8,0,14.1,6.3,14.1,14.1s-6.3,14.1-14.1,14.1H28.2v63.3l123.9-106.3L28.2,250.588z" />
        </g>
        <g style="&#10;    fill: red;&#10;">
          <polygon style="fill:#FFFFFF;" points="472.2,219.887 419.8,174.887 419.8,264.787  " />
          <polygon style="fill:#FFFFFF;" points="279.1,54.188 254,32.688 228.9,54.188  " />
          <polygon style="fill:#FFFFFF;" points="88.2,174.887 35.8,219.887 88.2,264.787  " />
        </g>
      </svg><br><button type="button" class="button-style" aria-describedby="button-example">Sign up</button>
      <span id="button-example" class="visually-hidden"> for our monthly newsletter</span>
      <h2>Best</h2><code>&lt;button&gt; +<br>aria-describedby +<br> visually hidden CSS</code>
    </div>
  </div>
</body>
body {
  margin: 1rem;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-column-gap: 0;
  grid-row-gap: 5rem;
}

svg {
  max-width: 250px;
  max-height: 250px;
  margin-bottom: 1rem;
}

.button-style {
  background-color: #ffc10d;
  color: #000000;
  padding: 0.5rem 1rem 0.75rem;
  border: 5px solid #000000;
  border-radius: 5px;
  font-size: 1.5rem;
  text-decoration: none;
  display: inline-grid;
  font-family: "Open Sans", sans-serif;
}

.button-style:hover,
.button-style:focus,
.button-style:active {
  text-decoration: underline;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 0;
}

p {
  font-size: 1.5rem;
  padding: 1.5rem;
}

code {
  font-size: 2rem;
}

.codewrapper {
  border: 1px solid #999;
  color: #fff;
  background: #666;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.