galaxy/Buttons/vinodjangid07_smooth-rabbit-93.html

<button class="readmore-btn">
  <span class="book-wrapper">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="rgb(86, 69, 117)"
      viewBox="0 0 126 75"
      class="book"
    >
      <rect
        stroke-width="3"
        stroke="#fff"
        rx="7.5"
        height="70"
        width="121"
        y="2.5"
        x="2.5"
      ></rect>
      <line stroke-width="3" stroke="#fff" y2="75" x2="63.5" x1="63.5"></line>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M25 20H50"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M101 20H76"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M16 30L50 30"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M110 30L76 30"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 65 75"
      class="book-page"
    >
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M40 20H15"
      ></path>
      <path
        stroke-linecap="round"
        stroke-width="4"
        stroke="#fff"
        d="M49 30L15 30"
      ></path>
      <path
        stroke-width="3"
        stroke="#fff"
        d="M2.5 2.5H55C59.1421 2.5 62.5 5.85786 62.5 10V65C62.5 69.1421 59.1421 72.5 55 72.5H2.5V2.5Z"
      ></path>
    </svg>
  </span>
  <span class="text"> Read more </span>
</button>

<style>
/* From Uiverse.io by vinodjangid07  - Tags: animation, button, hover, hover effect, read more, read */
.readmore-btn {
  width: fit-contentd;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgb(186, 125, 255);
  border: none;
  border-radius: 10px;
  padding: 0px 15px;
  gap: 0px;
  transition: all 0.4s;
}
.book-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 45px;
  height: 100%;
}
.book-wrapper .book-page {
  width: 50%;
  height: auto;
  position: absolute;
}
.readmore-btn:hover .book-page {
  animation: paging 0.4s linear infinite;
  transform-origin: left;
}
.readmore-btn:hover {
  background-color: rgb(159, 74, 255);
}
@keyframes paging {
  0% {
    transform: rotateY(0deg) skewY(0deg);
  }
  50% {
    transform: rotateY(90deg) skewY(-20deg);
  }
  100% {
    transform: rotateY(180deg) skewY(0deg);
  }
}
.text {
  width: 105px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: rgb(255, 255, 255);
}

</style>