<header>
  <h1>Mini Toolbar</h1>
  <ul>
    <li>
      <button>
        <svg width="24" height="24" viewBox="0 0 16 16">
          <rect x="4" width="12" height="12" transform="translate(20 12) rotate(-180)"/><polygon points="2 14 2 2 0 2 0 14 0 16 2 16 14 16 14 14 2 14"/>
        </svg>
        <span>Pages</span>
      </button>
    </li>
    <li>
      <button>
        <svg width="24" height="24" viewBox="0 0 16 16">
          <rect width="7" height="7" />
          <rect y="9" width="7" height="7" />
          <rect x="9" width="7" height="7" />
          <rect x="9" y="9" width="7" height="7" />
        </svg>
        <span>Collection</span>
      </button>
    </li>
    <li>
      <button>
        <svg width="24" height="24" viewBox="0 0 16 16">
          <path d="M3,0V7A2,2,0,0,0,5,9H6v5a2,2,0,0,0,4,0V9h1a2,2,0,0,0,2-2V0Zm9,7a1,1,0,0,1-1,1H9v6a1,1,0,0,1-2,0V8H5A1,1,0,0,1,4,7V6h8ZM4,5V1H6V4H7V1H9V4h1V1h2V5Z"/>
        </svg>
        <span>Appearance</span>
      </button>
    </li>
    <li>
      <button>
        <svg width="24" height="24" viewBox="0 0 16 16">
          <path d="M8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11ZM8,6a2,2,0,1,0,2,2A2,2,0,0,0,8,6Z"/><path d="M8.5,16h-1A1.5,1.5,0,0,1,6,14.5v-.85a5.91,5.91,0,0,1-.58-.24l-.6.6A1.54,1.54,0,0,1,2.7,14L2,13.3a1.5,1.5,0,0,1,0-2.12l.6-.6A5.91,5.91,0,0,1,2.35,10H1.5A1.5,1.5,0,0,1,0,8.5v-1A1.5,1.5,0,0,1,1.5,6h.85a5.91,5.91,0,0,1,.24-.58L2,4.82A1.5,1.5,0,0,1,2,2.7L2.7,2A1.54,1.54,0,0,1,4.82,2l.6.6A5.91,5.91,0,0,1,6,2.35V1.5A1.5,1.5,0,0,1,7.5,0h1A1.5,1.5,0,0,1,10,1.5v.85a5.91,5.91,0,0,1,.58.24l.6-.6A1.54,1.54,0,0,1,13.3,2L14,2.7a1.5,1.5,0,0,1,0,2.12l-.6.6a5.91,5.91,0,0,1,.24.58h.85A1.5,1.5,0,0,1,16,7.5v1A1.5,1.5,0,0,1,14.5,10h-.85a5.91,5.91,0,0,1-.24.58l.6.6a1.5,1.5,0,0,1,0,2.12L13.3,14a1.54,1.54,0,0,1-2.12,0l-.6-.6a5.91,5.91,0,0,1-.58.24v.85A1.5,1.5,0,0,1,8.5,16ZM5.23,12.18l.33.18a4.94,4.94,0,0,0,1.07.44l.36.1V14.5a.5.5,0,0,0,.5.5h1a.5.5,0,0,0,.5-.5V12.91l.36-.1a4.94,4.94,0,0,0,1.07-.44l.33-.18,1.12,1.12a.51.51,0,0,0,.71,0l.71-.71a.5.5,0,0,0,0-.71l-1.12-1.12.18-.33a4.94,4.94,0,0,0,.44-1.07l.1-.36H14.5a.5.5,0,0,0,.5-.5v-1a.5.5,0,0,0-.5-.5H12.91l-.1-.36a4.94,4.94,0,0,0-.44-1.07l-.18-.33L13.3,4.11a.5.5,0,0,0,0-.71L12.6,2.7a.51.51,0,0,0-.71,0L10.77,3.82l-.33-.18a4.94,4.94,0,0,0-1.07-.44L9,3.09V1.5A.5.5,0,0,0,8.5,1h-1a.5.5,0,0,0-.5.5V3.09l-.36.1a4.94,4.94,0,0,0-1.07.44l-.33.18L4.11,2.7a.51.51,0,0,0-.71,0L2.7,3.4a.5.5,0,0,0,0,.71L3.82,5.23l-.18.33a4.94,4.94,0,0,0-.44,1.07L3.09,7H1.5a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5H3.09l.1.36a4.94,4.94,0,0,0,.44,1.07l.18.33L2.7,11.89a.5.5,0,0,0,0,.71l.71.71a.51.51,0,0,0,.71,0Z"/>
        </svg>
        <span>Options</span>
      </button>
    </li>
    <li>
      <button>
        <svg width="24" height="24" viewBox="0 0 16 16">
          <path d="M6.57,1A5.57,5.57,0,1,1,1,6.57,5.57,5.57,0,0,1,6.57,1m0-1a6.57,6.57,0,1,0,6.57,6.57A6.57,6.57,0,0,0,6.57,0Z"/><rect x="11.84" y="9.87" width="2" height="5.93" transform="translate(-5.32 12.84) rotate(-45)"/>
        </svg>
        <span>Search</span>
      </button>
    </li>
  </ul>
</header>
<footer class="page-footer">
  <small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
  </small>
</footer>

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --green: #27ae60;
  --lightblue: #3498db;
  --gray: #95a5a6;
  --red: #e74c3c;
  --orange: #f1c40f;
  --white: white;
  --black: black;
  --blue: #36485f;
  --lightgray: #f1f1f1;
}

html {
  background: var(--lightgray);
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

a, 
button {
  color: inherit;  
}

a {
  text-decoration: none;
}

button {
  background: none;
  border: none;
  font-size: inherit;
  cursor: pointer;
  outline: none;        
}

body {
  font-size: 20px;
  font-family: sans-serif;
  padding: 0 10px;
  margin-top: 50px;
  color: var(--white);
}

h1 {
  font-size: 1.2rem;
}


/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header,
header ul,
header button {
  display: flex;
  align-items: center;
}

header {
  justify-content: space-between;
  max-width: 1000px;
  padding-left: 15px;
  margin: 0 auto;
  border-radius: 5px;
  background: var(--blue);
}

header button {
  padding: 15px;
  overflow: hidden;
  transition: filter 0.25s;
}

header li:nth-child(1) button {
  background: var(--green);
}

header li:nth-child(2) button {
  background: var(--lightblue);
}

header li:nth-child(3) button {
  background: var(--gray);
}

header li:nth-child(4) button {
  background: var(--red);
}

header li:nth-child(5) button {
  background: var(--orange);
}

header button:hover {
  filter: brightness(110%);
}

header button svg {
  fill: var(--white);
}

header button span {
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  transition: all 0.25s ease-out;
}

header button:hover span {
  margin-left: 15px;
  opacity: 1;
  max-width: 110px;
  visibility: visible;
}

@media screen and (max-width: 500px) {
  header {
    justify-content: center;
    padding-left: 0;
  }
  
  h1 {
    display: none;
  }
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 0.85rem;
  color: var(--black);
}

.page-footer span {
  color: var(--red);
}