Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <ul class="menu-bar">
    <li>
      <button>
        <span class="svg-container">
        <svg id="bread-svg" x="0px" y="0px" viewBox="0 0 79.4 83.3" xml:space="preserve">
  <path class="st1" d="M73.4,10.5c-1.9-1.2-4.2-2-6.4-2.5C55.1,5.5,43.1,5.7,31,6.7c-4.4,0.4-8.9,0.9-12.8,3.3
    c-4.5,2.7-6.1,8.1-2.5,11.7c4,4,4.4,8.5,4.2,13.6c-0.1,3.6,0.1,7.3-0.1,10.9c-0.2,2.9,0.8,3.8,3.6,3.6c1.7-0.1,4.2-0.6,4,2.1
    c-0.1,2.2-2.4,1.7-4,1.8c-3.1,0.2-4.8,2.5-3.5,4.9c1.2,2.1,3.3,0.7,4.9,1c1.2,0.2,2.4,0.4,2.6,1.7c0.2,1.4-0.9,2.4-2.1,2.1
    c-6.5-1.2-5.8,3-5.6,7c0.1,2,0,4,0,5.9c0,3.5,1.6,5.1,5.2,5c6.8-0.1,13.5,0,20.3,0c4.1,0,8.2,0,12.4,0c15.3-0.1,13.5,2,13.7-14.3
    c0-2.7-0.7-3.9-3.6-3.6c-1.6,0.1-4.2,0.6-4.1-2.1c0.1-2.3,2.4-1.8,3.9-1.8c2.1,0,3.8,0.2,3.8-2.9c0-2.9-1.3-3.2-3.6-3.1
    c-1.7,0.1-4.3,0.6-4.1-2.1c0.2-2.5,2.7-1.9,4.4-1.8c2.7,0.2,3.4-1,3.2-3.4c-0.2-3.8,0.1-7.6-0.1-11.4c-0.2-4.9,0.3-9.2,4.1-13.1
    C79,18.2,77.8,13.1,73.4,10.5z M32,43.7c-2.2-0.1-3.8-1.2-4.1-3.5c-0.3-2.5,1.2-4.1,3.6-4.3c2.5-0.2,4,1.4,4.1,3.8
    C35.7,42,34.2,43.2,32,43.7z M54.8,53.1c-2.5,2.9-5.6,4.5-9.5,4.5c-3.6-0.2-6.6-1.8-8.9-4.5c-0.7-0.8-0.9-1.8,0-2.6
    c0.8-0.9,1.8-0.9,2.6-0.1c4.5,4.4,8.9,4.3,13.3,0c0.8-0.8,1.8-0.7,2.6,0.1C55.7,51.3,55.6,52.2,54.8,53.1z M59.5,43.6
    c-2.2,0-3.7-1.4-3.8-3.6c-0.1-2.5,1.4-4,3.9-4.1c2.3-0.1,3.4,1.5,3.9,3.6C63.2,42,62,43.6,59.5,43.6z"/>
  <path class="st0" d="M14.2,26.1c-4.9-4.8-5.4-10.3-1.6-17c-7.3,3.5-8.6,9.1-3.8,14.1c2.4,2.5,3.3,5.1,3.3,8.4c-0.1,14.5,0,29,0,43.5
    c0,2.1-0.3,4.4,2.1,5.6c1.2,0.6,2.3,1.2,2.2-1.3c-0.2-16-0.3-32-0.3-47.9C16,29.5,15.7,27.6,14.2,26.1z"/>
  <g>
    <path d="M39.8,83.3c-7.8,0-15.5,0-23.3,0C8.7,83.3,6.1,80.7,6,73c0-14-0.1-28.1,0-42.1c0-2.9-0.5-5.2-2.6-7.6
      C-2.5,16.9-0.5,7.9,7.3,3.9c4.2-2.1,8.8-2.8,13.4-3.1c14.8-0.9,29.7-1.5,44.4,1.2C68,2.5,70.8,3.4,73.4,5c6.5,4,8,11.6,3.1,17.4
      c-2.5,2.9-3.2,5.8-3.2,9.4c0.1,13.9,0.1,27.7,0,41.6c0,7.2-2.6,9.9-9.8,9.9C55.6,83.3,47.7,83.3,39.8,83.3z M43.4,79.3
      c4.1,0,8.2,0,12.4,0c15.3-0.1,13.5,2,13.7-14.3c0-2.7-0.7-3.9-3.6-3.6c-1.6,0.1-4.2,0.6-4.1-2.1c0.1-2.3,2.4-1.8,3.9-1.8
      c2.1,0,3.8,0.2,3.8-2.9c0-2.9-1.3-3.2-3.6-3.1c-1.7,0.1-4.3,0.6-4.1-2.1c0.2-2.5,2.7-1.9,4.4-1.8c2.7,0.2,3.4-1,3.2-3.4
      c-0.2-3.8,0.1-7.6-0.1-11.4c-0.2-4.9,0.3-9.2,4.1-13.1c3.5-3.6,2.3-8.7-2.1-11.3c-1.9-1.2-4.2-2-6.4-2.5C53.1,3.5,41.1,3.7,29,4.7
      C24.6,5.1,20.2,5.7,16.2,8c-4.5,2.7-6.1,8.1-2.5,11.7c4,4,4.4,8.5,4.2,13.6c-0.1,3.6,0.1,7.3-0.1,10.9c-0.2,2.9,0.8,3.8,3.6,3.6
      c1.7-0.1,4.2-0.6,4,2.1c-0.1,2.2-2.4,1.7-4,1.8c-3.1,0.2-4.8,2.5-3.5,4.9c1.2,2.1,3.3,0.7,4.9,1c1.2,0.2,2.4,0.4,2.6,1.7
      c0.2,1.4-0.9,2.4-2.1,2.1c-6.5-1.2-5.8,3-5.6,7c0.1,2,0,4,0,5.9c0,3.5,1.6,5.1,5.2,5C29.8,79.3,36.6,79.3,43.4,79.3z M10.6,7
      c-7.3,3.5-8.6,9.1-3.8,14.1c2.4,2.5,3.3,5.1,3.3,8.4c-0.1,14.5,0,29,0,43.5c0,2.1-0.3,4.4,2.1,5.6c1.2,0.6,2.3,1.2,2.2-1.3
      c-0.2-16-0.3-32-0.3-47.9c0-2-0.2-3.9-1.8-5.4C7.3,19.3,6.8,13.8,10.6,7z"/>
    <path d="M43.4,55.6c-3.6-0.2-6.6-1.8-8.9-4.5c-0.7-0.8-0.9-1.8,0-2.6c0.8-0.9,1.8-0.9,2.6-0.1c4.5,4.4,8.9,4.3,13.3,0
      c0.8-0.8,1.8-0.7,2.6,0.1c0.8,0.9,0.6,1.8-0.1,2.6C50.4,53.9,47.3,55.5,43.4,55.6z"/>
    <path d="M30,41.7c-2.2-0.1-3.8-1.2-4.1-3.5c-0.3-2.5,1.2-4.1,3.6-4.3c2.5-0.2,4,1.4,4.1,3.8C33.7,40,32.2,41.2,30,41.7z"/>
    <path d="M61.5,37.6c-0.2,2.4-1.5,4-4,4c-2.2,0-3.7-1.4-3.8-3.6c-0.1-2.5,1.4-4,3.9-4.1C59.8,33.8,61,35.4,61.5,37.6z"/>
  </g>
  </svg>
        </span>
        <span class="text-container"><span>bread</span></span>
      </button>
    </li>
    <li>
      <button>
        <span class="svg-container">
        <svg id="taco-svg" x="0px" y="0px" viewBox="0 0 83 51.6" xml:space="preserve">
  <path class="st0" d="M70.5,16.7c-2.3-4.1-6-5-10.3-6.4C48.8,6.6,38,7,26.5,10.3C19,12.6,5.5,27,5.9,35.1c0,0.3,0.2,0.5,0.7,1.3
    c7.7-15.2,19.5-24.2,36.6-24.3C60.4,12,72.4,21,80.6,36.9c0.9-4.9-0.1-8.1-2.7-11C75.3,23,72.5,20.2,70.5,16.7z"/>
  <path class="st1" d="M43.2,15.9C25.9,16,11.3,28.6,8.2,45.8c-0.6,3.2,0.2,3.9,3.3,3.9c10.5-0.2,21.1-0.1,31.6-0.1
    c10.7,0,21.4-0.1,32.1,0.1c3.1,0,3.9-0.7,3.3-3.9C75.5,28.4,60.7,15.8,43.2,15.9z M19.6,39.6c-1.1-0.2-1.8-0.8-1.7-2
    c0.1-1.1,0.8-1.8,1.9-1.7c1.1,0.1,1.8,0.8,1.7,1.9C21.4,38.9,20.7,39.5,19.6,39.6z M23.7,45.4c-1.1,0.1-1.8-0.6-1.9-1.7
    c-0.1-1.1,0.6-1.8,1.7-1.9c1.1-0.1,1.7,0.6,2,1.7C25.4,44.6,24.8,45.4,23.7,45.4z M27.5,39.5c-1.1-0.1-1.8-0.8-1.7-1.9
    c0.1-1.1,0.8-1.8,1.9-1.7c1.1,0.1,1.7,0.8,1.7,1.9C29.2,38.9,28.6,39.6,27.5,39.5z M32.8,31.6c-1.9,0.1-3.1-1-3.1-2.9
    c0-1.6,1.1-2.7,2.8-2.7c1.7,0,2.6,1.1,2.9,2.7C35.3,30.3,34.4,31.5,32.8,31.6z M50.7,39.4c-1.6,2.8-4.1,4.1-7.3,4.3
    c-3.1-0.2-5.6-1.5-7.3-4.3c-0.6-1.1-0.9-2.2,0.2-3.1c1.2-1,2.1-0.4,2.9,0.6c2.8,3.6,5.5,3.6,8.3,0c0.8-1,1.7-1.6,2.9-0.7
    C51.6,37.2,51.4,38.3,50.7,39.4z M54.3,31.7c-1.6-0.3-2.8-1.2-2.7-2.8c0-1.9,1.2-3,3.1-2.9c1.6,0.2,2.6,1.3,2.5,3
    C57,30.6,55.9,31.5,54.3,31.7z M59.4,39.5c-1.1,0.1-1.8-0.6-1.9-1.7c-0.1-1.1,0.6-1.8,1.7-1.9c1.1-0.1,1.7,0.6,2,1.7
    C61.1,38.7,60.5,39.4,59.4,39.5z M63.3,45.4c-1.1,0.1-1.8-0.6-1.9-1.7c-0.1-1.1,0.6-1.7,1.7-2c1.1,0.1,1.8,0.6,1.9,1.7
    C65.1,44.6,64.4,45.4,63.3,45.4z M69,37.8c-0.1,1.1-0.8,1.8-1.9,1.7c-1.1-0.1-1.7-0.8-1.7-1.9c0.1-1.2,1-1.5,1.6-1.8
    C68.4,36.1,69.1,36.7,69,37.8z"/>
  <g>
    <path d="M41.1,51.6c-11.5,0-23.1-0.1-34.6,0.1c-3.4,0-5.1-0.9-4.5-4.5c0.6-3.7-1-7.1-1.6-10.7c-1.1-6.3,1.6-11,4.5-16.5
      C12.1,5.7,26,4.6,38.6,0.5c3.1-1,6.2-0.2,9.1,1.2c3.9,1.9,8,3,12.4,3.1c4.7,0.1,8.2,2.3,10.6,6.2c2.2,3.5,4.7,6.8,7.6,9.7
      c4.3,4.4,5.4,9.7,4.3,15.5c-0.7,4-2.1,7.9-1.6,12.2c0.4,3.2-2,3.2-4.3,3.2C64.8,51.5,52.9,51.6,41.1,51.6z M41.2,47.6
      c10.7,0,21.4-0.1,32.1,0.1c3.1,0,3.9-0.7,3.3-3.9c-3.1-17.3-17.9-29.9-35.4-29.8C23.9,14,9.3,26.6,6.2,43.8
      c-0.6,3.2,0.2,3.9,3.3,3.9C20.1,47.5,30.7,47.6,41.2,47.6z M4.6,34.4c7.7-15.2,19.5-24.2,36.6-24.3C58.4,10,70.4,19,78.6,34.9
      c0.9-4.9-0.1-8.1-2.7-11c-2.6-2.9-5.4-5.8-7.4-9.2c-2.3-4.1-6-5-10.3-6.4C46.8,4.6,36,5,24.5,8.3C17,10.6,3.5,25,3.9,33.1
      C3.9,33.4,4.2,33.6,4.6,34.4z"/>
    <path d="M41.4,41.7c-3.1-0.2-5.6-1.5-7.3-4.3c-0.6-1.1-0.9-2.2,0.2-3.1c1.2-1,2.1-0.4,2.9,0.6c2.8,3.6,5.5,3.6,8.3,0
      c0.8-1,1.7-1.6,2.9-0.7c1.1,0.9,0.9,2,0.2,3.1C47.1,40.2,44.6,41.5,41.4,41.7z"/>
    <path d="M33.4,26.7c-0.1,1.7-1,2.8-2.6,3c-1.9,0.1-3.1-1-3.1-2.9c0-1.6,1.1-2.7,2.8-2.7C32.2,24,33.1,25,33.4,26.7z"/>
    <path d="M52.3,29.7c-1.6-0.3-2.8-1.2-2.7-2.8c0-1.9,1.2-3,3.1-2.9c1.6,0.2,2.6,1.3,2.5,3C55,28.6,53.9,29.5,52.3,29.7z"/>
    <path d="M17.6,37.6c-1.1-0.2-1.8-0.8-1.7-2c0.1-1.1,0.8-1.8,1.9-1.7c1.1,0.1,1.8,0.8,1.7,1.9C19.4,36.9,18.7,37.5,17.6,37.6z"/>
    <path d="M27.4,35.8c-0.2,1.1-0.8,1.8-2,1.7c-1.1-0.1-1.8-0.8-1.7-1.9c0.1-1.1,0.8-1.8,1.9-1.7C26.8,34,27.4,34.7,27.4,35.8z"/>
    <path d="M59.1,35.6c-0.1,1.1-0.6,1.8-1.7,1.9c-1.1,0.1-1.8-0.6-1.9-1.7c-0.1-1.1,0.6-1.8,1.7-1.9C58.3,33.8,58.9,34.5,59.1,35.6z"
      />
    <path d="M65,33.8c1.4,0.3,2.1,0.9,2,2c-0.1,1.1-0.8,1.8-1.9,1.7c-1.1-0.1-1.7-0.8-1.7-1.9C63.4,34.4,64.3,34.1,65,33.8z"/>
    <path d="M23.5,41.6c-0.1,1.1-0.6,1.8-1.7,1.9c-1.1,0.1-1.8-0.6-1.9-1.7c-0.1-1.1,0.6-1.8,1.7-1.9C22.6,39.7,23.2,40.5,23.5,41.6z"
      />
    <path d="M61.1,39.8c1.1,0.1,1.8,0.6,1.9,1.7c0.1,1.1-0.6,1.8-1.7,1.9c-1.1,0.1-1.8-0.6-1.9-1.7C59.3,40.6,60.1,40,61.1,39.8z"/>
  </g>
  </svg>
        </span>
        <span class="text-container"><span>taco</span></span>
      </button>
    </li>
    <li>
      <button>
        <span class="svg-container">
        <svg id="zza-svg" x="0px" y="0px" viewBox="0 0 83 87.1" xml:space="preserve">
  <path class="st1" d="M69.7,24C61.4,21,52.8,19.7,44,19.8c-9.1-0.2-18,1-26.7,4c-2.9,1-4,2.1-2.3,5.2c2.5,4.6,4.7,9.4,6.8,14.3
    c1.2,2.7,2.3,3.6,5.5,2.7c4.9-1.5,10,1.2,12.6,5.6c2.6,4.5,2.6,10.6-1.6,13.6c-4.9,3.5-3.5,6.6-1.3,10.5c1.4,2.4,2.4,5.1,3.7,7.5
    c0.8,1.6,2.2,2.5,4.1,1.7c2.8-1.2,4.1-7,2-9.4c-3.3-3.8-4.3-8.1-2.2-12.8c2.2-4.8,6.1-7.5,11.4-7c3,0.3,4-1,5.1-3.3
    c3.5-7.8,7.1-15.6,11-23.2C73.7,25.9,72.4,24.9,69.7,24z M33.5,30.1c-0.2,2.2-1.7,3.4-4,3.6c-2.1-0.4-3.7-1.5-3.7-3.8
    c0-2.5,1.5-4,4-3.9C32.3,26,33.7,27.7,33.5,30.1z M52.5,41.3c-2.4,2.7-5.4,4.2-9,4.3c-3.5-0.1-6.3-1.5-8.7-4c-0.8-0.9-1.6-1.8-0.6-3
    c0.9-1.1,2-1,3-0.1c4.3,4.2,8.6,4.1,12.9-0.1c0.8-0.7,1.7-1,2.6-0.1C53.7,39.3,53.4,40.3,52.5,41.3z M57.2,33.6
    c-2.2-0.1-3.7-1.5-3.7-3.8c0-2.5,1.5-4,4-3.9c2.3,0,3.4,1.6,3.8,3.8C61,32.1,59.7,33.7,57.2,33.6z"/>
  <path class="st0" d="M48.8,63.1c-1.7,2.5-1.9,5.2-0.3,7.9c0.5,0.8,1.2,1.8,2,2c1.2,0.3,1.3-1.2,1.7-2c1.7-3.5,3.3-7.1,5.2-11.1
    C53.4,59,50.7,60.3,48.8,63.1z"/>
  <path class="st0" d="M36.9,54.5c-1.4-3.2-3.9-4.7-6.8-4.9c-3.7,0.1-5.1,1-3.3,4.4c1.5,2.7,2.8,5.6,4,8.4c1.2,2.8,2.7,2.4,4.4,0.6
    C37.5,60.6,38.3,57.7,36.9,54.5z"/>
  <path class="st0" d="M76.6,12.6C66,8.1,54.9,6.1,43.4,6C31.9,6.1,20.8,8,10.2,12.5c-2.9,1.2-5.2,2.9-3.9,6.3
    c1.3,3.5,4.1,3.5,7.4,2.3c19.8-7.3,39.6-7.3,59.4,0.1c3.1,1.2,6,1.6,7.6-2C82.2,15.5,79.6,13.8,76.6,12.6z"/>
  <g>
    <path d="M41.5,0c12,0.1,23.6,2.2,34.7,6.9c3.8,1.6,6.6,3.9,6.8,8.2c0.2,4.1-1.9,7-5.6,8.4c-2.1,0.8-2.5,2.5-3.2,4.1
      c-8.3,17.6-16.6,35.1-24.8,52.7c-1.6,3.4-3.3,6.7-7.6,6.8c-4.6,0.1-6.3-3.4-8-6.9C25.5,62.6,17.2,45,8.9,27.4
      c-0.8-1.8-1.6-3.5-3.7-4.3c-3.5-1.4-5.4-4.3-5.3-8.1c0.2-3.9,2.4-6.3,5.9-7.8C17.3,2.3,29.2,0,41.5,0z M42,17.8
      c-9.1-0.2-18,1-26.7,4c-2.9,1-4,2.1-2.3,5.2c2.5,4.6,4.7,9.4,6.8,14.3c1.2,2.7,2.3,3.6,5.5,2.7c4.9-1.5,10,1.2,12.6,5.6
      c2.6,4.5,2.6,10.6-1.6,13.6c-4.9,3.5-3.5,6.6-1.3,10.5c1.4,2.4,2.4,5.1,3.7,7.5c0.8,1.6,2.2,2.5,4.1,1.7c2.8-1.2,4.1-7,2-9.4
      c-3.3-3.8-4.3-8.1-2.2-12.8c2.2-4.8,6.1-7.5,11.4-7c3,0.3,4-1,5.1-3.3c3.5-7.8,7.1-15.6,11-23.2c1.7-3.3,0.4-4.2-2.3-5.2
      C59.4,19,50.8,17.7,42,17.8z M41.4,4C29.9,4.1,18.8,6,8.2,10.5c-2.9,1.2-5.2,2.9-3.9,6.3c1.3,3.5,4.1,3.5,7.4,2.3
      c19.8-7.3,39.6-7.3,59.4,0.1c3.1,1.2,6,1.6,7.6-2c1.6-3.7-1-5.3-4-6.6C64,6.1,52.9,4.1,41.4,4z M28.1,47.6c-3.7,0.1-5.1,1-3.3,4.4
      c1.5,2.7,2.8,5.6,4,8.4c1.2,2.8,2.7,2.4,4.4,0.6c2.3-2.5,3.1-5.3,1.7-8.6C33.5,49.3,31,47.8,28.1,47.6z M55.4,57.9
      c-4-0.9-6.7,0.4-8.6,3.2c-1.7,2.5-1.9,5.2-0.3,7.9c0.5,0.8,1.2,1.8,2,2c1.2,0.3,1.3-1.2,1.7-2C51.9,65.5,53.5,61.9,55.4,57.9z"/>
    <path d="M41.5,43.6c-3.5-0.1-6.3-1.5-8.7-4c-0.8-0.9-1.6-1.8-0.6-3c0.9-1.1,2-1,3-0.1c4.3,4.2,8.6,4.1,12.9-0.1
      c0.8-0.7,1.7-1,2.6-0.1c1.1,1,0.8,2.1-0.1,3C48.1,42,45.1,43.5,41.5,43.6z"/>
    <path d="M27.5,31.7c-2.1-0.4-3.7-1.5-3.7-3.8c0-2.5,1.5-4,4-3.9c2.5,0.1,3.9,1.8,3.7,4.2C31.3,30.3,29.7,31.5,27.5,31.7z"/>
    <path d="M59.3,27.7c-0.3,2.4-1.6,4-4.1,3.9c-2.2-0.1-3.7-1.5-3.7-3.8c0-2.5,1.5-4,4-3.9C57.8,23.9,58.9,25.5,59.3,27.7z"/>
  </g>
  </svg>
        </span>
        <span class="text-container"><span>pizza</span></span>
      </button>
    </li>
    <li>
      <button>
        <span class="svg-container">
        <svg id="brocc-svg" x="0px" y="0px" viewBox="0 0 95.1 91.6" xml:space="preserve">
  <path class="st0" d="M62.2,63.9c-2.3,4.4-4.3,8.9-6,13.5c-0.5,1.4-0.6,3.8-2.8,3.5c-2.6-0.3-1.9-2.7-1.9-4.3c-0.1-5.9,0-11.9,0-18.2
    c-3,1.2-4.1,2.5-4,5.1c0.2,4.4,0.2,8.9,0,13.3c-0.1,2.1,1.3,5.4-1.7,5.9c-2.8,0.5-2.9-3-4-4.9c-2-3.6-3.8-7.3-5.5-11.1
    c-1.3-3-3.3-4.8-7.2-4.8c4,7.9,8,15.4,11.7,23.2c1.4,2.9,2.9,4.1,6.3,4c8.5-0.2,8.5-0.1,11.5-7.9c1.1-2.8,2.3-5.5,3.5-8.2
    c2.5-5.7,6.1-10.7,9.5-16.3C66.8,57.7,64.2,60.2,62.2,63.9z"/>
  <path class="st1" d="M83.2,24.6c-2.9-0.8-4.6-2-6-4.8c-5-10.1-17.5-12.9-26.5-6.1c-2.6,2-3.5,2.1-5.2-0.9c-3.4-5.9-9.7-8-15.8-6.1
    c-6.2,1.9-10,7.1-9.8,13.8c0.1,2.4-0.4,3.2-2.8,3.8c-7.7,1.9-12,8.1-11,15.2c1,6.9,6.6,11.9,14.1,12c2.4,0,3.9,0.7,5.5,2.4
    c6.7,7.3,16.7,7.6,23.5,0.4c2.1-2.2,3.2-2.1,5.6-0.7c5.2,3.1,10.5,2.6,15.2-1.2c2-1.7,3.7-1.9,6.2-1.3c8.6,2,16.8-4.5,16.9-13.3
    C93.1,31.8,89.3,26.2,83.2,24.6z M35.9,31.7c-2.2-0.1-3.8-1.2-4.1-3.5c-0.3-2.5,1.2-4.1,3.6-4.3c2.5-0.2,4,1.4,4.1,3.8
    C39.6,30,38.1,31.3,35.9,31.7z M58.6,41.3c-2.4,2.7-5.4,4.2-9,4.3c-3.7-0.1-6.7-1.6-9.1-4.3c-0.7-0.8-1.1-1.7-0.4-2.6
    c0.9-1.1,2-1.1,3-0.1c4.3,4.2,8.6,4.1,12.9,0c0.8-0.7,1.7-1,2.6-0.2C59.8,39.3,59.5,40.3,58.6,41.3z M63.8,31.7
    c-2.5-0.2-4.1-1.3-4.3-3.6c-0.2-2.5,1.2-4.1,3.7-4.2c2.5-0.1,4,1.5,4,3.9C67.3,30.1,65.6,31.2,63.8,31.7z"/>
  <g>
    <path d="M46.4,91.1c-6,1.9-9.2-1.8-12-8.1c-3.9-9-9.2-17.5-13.7-26.2c-1.2-2.2-2.6-3.2-5.3-3.5C7.2,52.1,1.2,45.8,0.1,37.9
      c-1-7.7,3.1-14.7,10.8-18.2c2-0.9,2.8-1.9,3.2-4.2c1.1-7.3,5.2-12.4,12.3-14.6c7-2.2,13.1-0.3,18,4.8c1.8,1.8,2.8,2.2,5.3,1
      c10.5-5.4,22.2-2.1,28.2,8c1.4,2.3,2.8,3.6,5.4,4.5c7.7,2.7,12.4,10.3,11.6,18.2c-0.8,8.1-7,14.9-15.3,15.8c-3.2,0.4-5,1.8-6.8,4.1
      C67.1,65,62.7,73.4,59.5,82.5C56.5,91.1,56.6,91.1,46.4,91.1z M91.1,35.8c0.1-6.1-3.8-11.6-9.9-13.3c-2.9-0.8-4.6-2-6-4.8
      c-5-10.1-17.5-12.9-26.5-6.1c-2.6,2-3.5,2.1-5.2-0.9c-3.4-5.9-9.7-8-15.8-6.1c-6.2,1.9-10,7.1-9.8,13.8c0.1,2.4-0.4,3.2-2.8,3.8
      c-7.7,1.9-12,8.1-11,15.2c1,6.9,6.6,11.9,14.1,12c2.4,0,3.9,0.7,5.5,2.4c6.7,7.3,16.7,7.6,23.5,0.4c2.1-2.2,3.2-2.1,5.6-0.7
      c5.2,3.1,10.5,2.6,15.2-1.2c2-1.7,3.7-1.9,6.2-1.3C82.8,51.1,91,44.5,91.1,35.8z M27.2,60.1c4,7.9,8,15.4,11.7,23.2
      c1.4,2.9,2.9,4.1,6.3,4c8.5-0.2,8.5-0.1,11.5-7.9c1.1-2.8,2.3-5.5,3.5-8.2c2.5-5.7,6.1-10.7,9.5-16.3c-4.8,0.9-7.4,3.4-9.3,7.1
      c-2.3,4.4-4.3,8.9-6,13.5c-0.5,1.4-0.6,3.8-2.8,3.5c-2.6-0.3-1.9-2.7-1.9-4.3c-0.1-5.9,0-11.9,0-18.2c-3,1.2-4.1,2.5-4,5.1
      c0.2,4.4,0.2,8.9,0,13.3c-0.1,2.1,1.3,5.4-1.7,5.9c-2.8,0.5-2.9-3-4-4.9c-2-3.6-3.8-7.3-5.5-11.1C33.1,61.9,31.1,60.1,27.2,60.1z
       M40.7,68.9c0.3,0,0.6,0,0.9,0c0-2,0-4.1,0-6.1c0-0.8,0.2-1.9-0.9-1.9c-0.9,0-2,0.2-2.8,0.7C37,62.1,37.7,63,38,63.7
      C38.9,65.4,39.8,67.2,40.7,68.9z M53.5,64.3c0.3,0,0.5,0.1,0.8,0.1c0.9-1.7,1.9-3.3,2.8-5c0.4-0.7,1.1-1.5,0-2
      c-0.8-0.4-1.9-0.8-2.8-0.7c-1.1,0.1-0.8,1.2-0.8,2C53.5,60.6,53.5,62.5,53.5,64.3z"/>
    <path d="M47.6,43.6c-3.7-0.1-6.7-1.6-9.1-4.3c-0.7-0.8-1.1-1.7-0.4-2.6c0.9-1.1,2-1.1,3-0.1c4.3,4.2,8.6,4.1,12.9,0
      c0.8-0.7,1.7-1,2.6-0.2c1.1,1,0.8,2-0.1,3C54.2,41.9,51.2,43.5,47.6,43.6z"/>
    <path d="M33.9,29.7c-2.2-0.1-3.8-1.2-4.1-3.5c-0.3-2.5,1.2-4.1,3.6-4.3c2.5-0.2,4,1.4,4.1,3.8C37.6,28,36.1,29.3,33.9,29.7z"/>
    <path d="M61.8,29.7c-2.5-0.2-4.1-1.3-4.3-3.6c-0.2-2.5,1.2-4.1,3.7-4.2c2.5-0.1,4,1.5,4,3.9C65.3,28.1,63.6,29.2,61.8,29.7z"/>
  </g>
  </svg>
        </span>
        <span class="text-container"><span>brocc</span></span>
      </button>
    </li>
  </ul>
</div>











<small><strong>Credits ✨</strong></small>
<small>
  Dribbble by <a href="https://dribbble.com/shots/6110784-Toolbar-Icons-Animation-Principle-Freebie" target="_blank">Andriy</a>
</small>

<small><a target="_blank" href="https://icons8.com/icon/119923/kawaii-bread">Bread</a>, <a target="_blank" href="https://icons8.com/icon/121571/kawaii-taco">Taco</a>, <a target="_blank" href="https://icons8.com/icon/120092/kawaii-pizza">Pizza</a>, and <a target="_blank" href="https://icons8.com/icon/CY1rBGBPIwL-/kawaii-broccoli">Broccoli</a> icons by <a target="_blank" href="https://icons8.com">Icons8</a></small>

              
            
!

CSS

              
                body {
  margin: 0 auto;
  font-family: sans-serif;
}

.container {
  display: flex;
  justify-content: center;
}

.menu-bar {
  background: #ecf1ff;
  margin: 5rem 2rem;
  display: inline-flex;
  padding: 0 2rem;
  list-style: none;
  
  li {
    
  }
  
  button {
    background: 0;
    border: none;
    padding: 2rem;
    position: relative;
    color: #2971d7;
    font-weight: 700;
    font-size: 14px;
    font-family: sans-serif;
    margin-bottom: -1.5rem;
    transition: 0.25s ease all;
    transition-timing-function: cubic-bezier(.22,.56,.78,1.4);
    
    // background: lightgreen;
    
    &::before, &::after {
      content: '';
      display: block;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      background: #ecf1ff;
      transition: 0.25s all;
      transition-timing-function: cubic-bezier(.22,.56,.58,1.72);
      transition-delay: 0.125s;
    }
    
    &::before {
      width: 0.5rem;
      height: 0.5rem;
      top: 1rem;
    }
    
    &::after {
      width: 2px;
      height: 2px;
      top: 1.5rem;
    }
    
    .svg-container {
      display: block;
      // background: green;
      width: 40px;
      height: 40px;
      z-index: 2;
      position: relative;
      // margin-bottom: 1rem;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .text-container {
      display: block;
      // background: blue;
      overflow: hidden;
      
      >span {
        display: block;
        padding-top: 0.5rem;
        transform: translateY(100%);
        transition: 0.25s ease all;
      }
    }
    
    .st0, .st1 {
      opacity: 0;
      transition: 0.2s ease all;
    }
    
    .st1 {
      transition-delay: 0.1s;
    }
    
    &:hover, &:focus {
      outline: none;
      transform: translateY(-1.5rem);
      
      &::before {
        width: 2.5rem;
        height: 2.5rem;
      }
      
      &::after {
        top: 0;
        background: #2971d7;
        width: 4px;
        height: 4px;
      }
      
      .text-container {
        >span {
          transform: translateY(0);
        }
      }
      
      .st0, .st1 {
        opacity: 1;
      }
    }
  }
}

#taco-svg {
  transform: scale(1.1);
}

#zza-svg {
  transform: scale(0.9);
}

#bread-svg {
  transform: scale(0.85);
}

svg path {
  fill: #2971d7;
}

.st0 {
  fill: #569FF1;
}

.st1 {
  fill: #89BDFE;
}

small {
  display: block;
  text-align: center;
  color: #2971d7;
  
  a {
    color: #569FF1;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console