<h1 class="fs32 m20">Functional image + text</h1>
<div class="fs18">
  <button
    class="aic an bbg bn br2 ci df fi fwb m20 pb10 pl20 pr20 pt10"
    onclick="javascript:void(0);"
    type="button"
  >
    <svg
      aria-hidden="true"
      fill="none"
      height="24"
      viewBox="0 0 24 24"
      width="24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        clip-rule="evenodd"
        d="M7 4C7 2.89543 7.89543 2 9 2H15C16.1046 2 17 2.89543 17 4V6H18.9897C18.9959 5.99994 19.0021 5.99994 19.0083 6H21C21.5523 6 22 6.44772 22 7C22 7.55228 21.5523 8 21 8H19.9311L19.0638 20.1425C18.989 21.1891 18.1182 22 17.0689 22H6.93112C5.88184 22 5.01096 21.1891 4.9362 20.1425L4.06888 8H3C2.44772 8 2 7.55228 2 7C2 6.44772 2.44772 6 3 6H4.99174C4.99795 5.99994 5.00414 5.99994 5.01032 6H7V4ZM9 6H15V4H9V6ZM6.07398 8L6.93112 20H17.0689L17.926 8H6.07398ZM10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V11C13 10.4477 13.4477 10 14 10Z"
        fill-rule="evenodd"
        fill="currentColor"
      ></path>
    </svg>
    <span class="ml10">Delete email</span>
  </button>
</div>
:root {
  font-size: 62.5%;
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  min-height: 100vh;
}
body {
  --magenta: #c678dd;
  --b-bg: var(--magenta);

  font-kerning: normal;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Courier New", Courier, monospace;
  background-color: #1e2127;
  color: #fff;
}
.aic { align-items: center; }
.an { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.bbg { background-color: var(--b-bg); }
.bn { border: none; }
.br2 { border-radius: 0.2rem; }
.ci { color: inherit; }
.df { display: flex; }
.fi { font: inherit; }
.fs18 { font-size: 1.8rem; }
.fs32 { font-size: 3.2rem; }
.fwb { font-weight: bold; }
.m0 { margin: 0; }
.m20 { margin: 2rem; }
.ml10 { margin-left: 1rem; }
.pb10 { padding-bottom: 1rem; }
.pl20 { padding-left: 2rem; }
.pr20 { padding-right: 2rem; }
.pt10 { padding-top: 1rem; }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.