.uikfe-btn-style3 {
   position: relative;
   margin: auto;
   transition: all var(--uikfe-transition-base, 0.2s) ease-in-out;
   border: none;
   background: none;
   display: inline-flex;
   align-items: center;
}
.uikfe-btn-style3 .uikfe-btn-bg-circle {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   background: var(--uikfe-color-accent);
   width: var(--uikfe-s3-circle-width, 43px);
   height: var(--uikfe-s3-circle-height, 43px);
   border-radius: 50px;
   z-index: 0;
   transition:
      width var(--uikfe-transition-base, 0.4s) var(--uikfe-s3-ease, ease-in-out),
      background-color var(--uikfe-transition-base, 0.3s) ease-in-out;
   pointer-events: none;
}
.uikfe-btn-style3:hover .uikfe-btn-bg-circle {
   width: 100%;
}

/* Reverse mode: full width at rest, shrinks on hover */
.uikfe-btn-style3.uikfe-s3-reverse .uikfe-btn-bg-circle {
   width: 100%;
}
.uikfe-btn-style3.uikfe-s3-reverse:hover .uikfe-btn-bg-circle {
   width: var(--uikfe-s3-circle-width, 43px);
}
.uikfe-btn-style3 .first-text {
   background-color: transparent;
   padding: 0 var(--uikfe-s3-text-hpad, 12px);
   z-index: 1;
}
.uikfe-btn-style3 .uikfe-btn-icon-right,
.uikfe-btn-style3 .uikfe-btn-icon-left {
   z-index: 1;
   flex-shrink: 0;
}
.uikfe-btn-style3 svg {
   width: var(--uikfe-btn-icon-width, 15px);
   height: var(--uikfe-btn-icon-height, 15px);
   fill: var(--uikfe-color-tertiary);
   transition: all var(--uikfe-transition-base, 0.3s) ease-in-out;
   flex-shrink: 0;
}