I have this button in HTML:

<button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
      <div class="icons">
        <i id="sidebar-toggle-default" class="fa-solid fa-bars sidebar-toggle-icon-default"></i>
        <i id="sidebar-toggle-active" class="fa-solid fa-bars-staggered sidebar-toggle-icon-active"></i>
      </div>
    </button>

It’s part of a collapsible sidebar that I made with Bootstrap (officially called an offcanvas). When I hover my mouse over this, I want the "sidebar-toggle-default" icon to transition to the "sidebar-toggle-active"icon.

I found this thread that tells me it’s possible to do this with just CSS, but the effect is too complicated for what I’m trying to do, and I can’t seem to replicate it in my own code either.

I want a very simple animation. The default icon is 3 bars stacked vertically, and the “active” icon below it is the same but the middle bar has a slight offset relative to the rest. When I hover over the icons, I want the transition to look like the middle bar is pushed forward. Is there a way to accomplish this?