Discovery buttons

These buttons have specific design and animation, they could work to draw the attention as CTA 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 buttons to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS instead of putting them into the code element in order to avoid FOUC as the code block is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined.

HTML:

<section class="discovery-section">
  <div class="discovery-wrapper">
    <div class="discovery-ctn">
      <p class="discovery-txt">HERE</p>
    </div>
    <button class="discovery-btn">CLICK ME</button>
  </div>
  <div class="discovery-wrapper">
    <div class="discovery-ctn">
      <p class="discovery-txt">THERE</p>
    </div>
    <button class="discovery-btn">CLICK ME</button>
  </div>
  <div class="discovery-wrapper">
    <div class="discovery-ctn">
      <p class="discovery-txt">WHERE?</p>
    </div>
    <button class="discovery-btn">CLICK ME</button>
  </div>
</section>

CSS:

:root {
  --primary-rtg: #202020;
  --secondary-rtg: #9b6bf7;
}
.discovery-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--primary-rtg);
  justify-content: center;
  height: 75vh;
  width: 100%;
}
.discovery-wrapper {
  position: relative;
  margin: 2rem;
  border-radius: 50%;
}
.discovery-ctn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-rtg);
  border-radius: 50%;
  z-index: 0;
  transition: all 0.3s linear;
  box-shadow: rgba(0, 0, 0, 0.27) -19px -19px 25px 0px inset,
    rgba(0, 0, 0, 0.25) -19px -26px 30px 0px inset,
    rgba(0, 0, 0, 0.2) -10px -79px 40px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 5px 4px 2px,
    rgba(0, 0, 0, 0.09) 18px 18px 4px, rgba(0, 0, 0, 0.1) 16px 16px 8px,
    rgba(0, 0, 0, 0.1) 5px 33px 16px,
    rgba(255, 255, 255, 0.3) 19px 19px 35px 0px inset;
}
.discovery-txt {
  color: white;
  font-size: 2rem;
  transition: all 0.3s linear;
}
.discovery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  font-size: 2rem;
  background-color: var(--primary-rtg);
  color: white;
  border: none;
  z-index: 0;
  border-radius: 50%;
  transition: all 0.3s linear;
  box-shadow: inset 10px 10px 20px #101010, inset -10px -10px 20px #303030;
  transform: scale(0, 0);
  transform-origin: center;
  cursor: pointer;
}
.discovery-wrapper:hover .discovery-btn {
  z-index: 20;
  transform: scale(1, 1) rotate(360deg);
}

.discovery-wrapper:hover .discovery-ctn {
  box-shadow: none;
}

.discovery-wrapper:hover .discovery-txt {
  transform: rotate(-360deg);
}
.discovery-btn:before {
  content: "THANKS";
  font-size: 2rem;
  z-index: 1;
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s linear;
  transform-origin: center;
  box-shadow: inset 10px 10px 20px #101010, inset -10px -10px 20px #303030;
  transition: all 0.3s ease;
}
.discovery-btn:active.discovery-btn:before {
  opacity: 1;
  color: white;
}
.discovery-btn:active.discovery-btn {
  color: transparent;
}
.discovery-wrapper:before {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  top: -5%;
  left: -5%;
  border: 6px solid white;
}
@media screen and (max-width: 1119px) {
  .discovery-section {
    flex-direction: column;
  }
}