<header style="--hue: 300">
  <h1>Header</h1>

  <button>
    <i class='material-icons icon-material-search'>search</i>
  </button>
</header>

<header style="--hue: 200">
  <h1>Header</h1>

  <button>
    <i class='material-icons icon-material-search'>search</i>
  </button>
</header>

<header style="--hue: 100">
  <h1>Header</h1>

  <button>
    <i class='material-icons icon-material-search'>search</i>
  </button>
</header>

header {
  background-color: hsl(var(--hue), 30%, 20%)
}


header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}




















header {
  padding: 1rem 2.8rem;
  position: relative;
  color: white;
  margin-bottom: 60px;
}

button {
  position: absolute;
  bottom: -30px;
  width: 60px;
  height: 60px;
  right: 60px;
  border-radius: 100%;
  background: #e91e63;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border: none;
  color: white;
}