Sliding button

These simple buttons could most probably improve customer experience on your website compared with basic buttons.

In order to achieve them you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the sliding buttons to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. So for Bricks I used a code-element to build-up the buttons however I tried to cover the case Font Awesome is not loaded into your builder. For oxygen builder, please follow the HTML structure so you can add-up divs instead and add icon block (therefore Font Awesome) instead of the <i> tag.

I will start with the mandatory library to be loaded, Font Awesome in this case (in the head), then I will show respectively the HTML, CSS and JavaScript.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied, the font is not defined, the container div doesn’t have any background color and the <a> tag is not “unset”.

The Javascript is used to add the “.reverse” class so the sliding button can move back to its original position. I am also using a “foreach” method to make each button unique, otherwise all the three buttons will move at the same time, which is not something we want.

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<div class="sld-section">
    <div class="sld-ctn">
        <a href="#">
          <div class="sld-btn"></div>
          <p class="sld-txt">HOVER ME</p>
          <i class="sld-icon fa-solid fa-plus"></i>
        </a>
      </div>
      <div class="sld-ctn">
        <a href="#">
          <div class="sld-btn"></div>
          <p class="sld-txt">HOVER ME</p>
          <i class="sld-icon fa-solid fa-plus"></i>
        </a>
      </div>
      <div class="sld-ctn">
        <a href="#">
          <div class="sld-btn"></div>
          <p class="sld-txt">HOVER ME</p>
          <i class="sld-icon fa-solid fa-plus"></i>
        </a>
      </div>
</div>

CSS:

:root {
  --primary: #202020;
  --secondary: #9b6bf7;
  --col-txt: #fff;
  --size: 60px; /* circle and button height*/
  --width: 220px; /* button width*/
}
/* Sliding Buttons */
.sld-section {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.sld-ctn {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 3rem;
  flex-direction: row;
  width: var(--width);
  height: var(--size);
}
.sld-btn {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--size);
  width: var(--size);
  border-radius: 50px;
  background-color: var(--secondary);
  z-index: 1;
}
.sld-txt {
  position: relative;
  color: var(--col-txt);
  font-size: 22px;
  margin-left: calc(-1 * var(--size));
  z-index: 2;
}
.sld-icon {
  color: var(--col-txt);
  position: absolute;
  top: 10px; /* to adapt according to button size */
  right: 12px; /* to adapt according to button size */
  font-size: 40px;
  z-index: 2;
}
.reverse .sld-btn {
  animation: back 1s ease-in-out backwards;
}
.sld-ctn:hover .sld-btn {
  animation: animate 1s ease-in-out forwards;
}
@keyframes animate {
  0% {
    left: 0;
    right: auto;
  }
  50% {
    width: var(--width);
  }
  100% {
    right: 0;
    left: auto;
  }
}
@keyframes back {
  0% {
    right: 0;
    left: auto;
  }
  50% {
    width: var(--width);
  }
  100% {
    right: auto;
    left: 0;
  }
}
@media screen and (max-width: 991px) {
  .sld-section {
    flex-direction: column;
  }
}

JavaScript:

const sends = document.querySelectorAll(".sld-ctn");

sends.forEach((send) => {
  send.addEventListener("mouseout", () => send.classList.add("reverse"));
});