File Manager

Editing:etheme-text-button.css

.etheme-text-button {
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.12s linear;
  transition: all 0.12s linear;
  vertical-align: middle;
}
.etheme-text-button .elementor-button-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.etheme-text-button > span {
  position: relative;
  -webkit-transition: inherit;
  transition: inherit;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.etheme-text-button > span > span,
.etheme-text-button > span > i,
.etheme-text-button > span > svg {
  z-index: 1;
}
.etheme-text-button.has-fill:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all 0.25s;
}
.etheme-text-button.has-fill:hover:before {
  background: var(--fill-color);
}
.etheme-text-button.fill-rtl:not(:hover):before {
  left: 100%;
}
.etheme-text-button.fill-ltr:not(:hover):before {
  right: 100%;
}
.etheme-text-button.fill-top:not(:hover):before {
  top: 100%;
}
.etheme-text-button.fill-bottom:not(:hover):before {
  bottom: 100%;
}
.etheme-text-button.fill-circle {
  --proportion: 2.5em;
}
.etheme-text-button.fill-circle:before {
  height: var(--proportion);
  max-width: var(--proportion);
  border: 0.1em solid var(--fill-color);
  border-radius: 50%;
  margin: auto;
}
.etheme-text-button.fill-circle:hover:before {
  border-radius: inherit;
  max-width: 100%;
  background-color: transparent;
}
.etheme-text-button .button-line {
  border-bottom: 0.1em solid currentColor;
  min-width: 1.4em;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-transition: min-width 0.3s;
  transition: min-width 0.3s;
}
.etheme-text-button:hover .button-line {
  min-width: 2.4em;
}
.etheme-text-button.fill-underline:before,
.etheme-text-button.fill-overline:before {
  top: auto;
  right: 0;
  height: 0.1em;
  width: 0;
  left: auto;
  background: var(--fill-color);
}
.etheme-text-button.fill-underline:hover:before,
.etheme-text-button.fill-overline:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}
.etheme-text-button.fill-overline:before {
  top: 0;
  bottom: auto;
}
.etheme-text-button:hover .elementor-button-icon.animation-background_ltr {
  -webkit-animation: toLeftFromRight 0.4s forwards;
          animation: toLeftFromRight 0.4s forwards;
}
.etheme-text-button:hover .elementor-button-icon.animation-background_to_bottom {
  -webkit-animation: toBottomFromTop 0.4s forwards;
          animation: toBottomFromTop 0.4s forwards;
}
.etheme-text-button:hover .elementor-button-icon.animation-background_rtl {
  -webkit-animation: toRightFromLeft 0.4s forwards;
          animation: toRightFromLeft 0.4s forwards;
}
.etheme-text-button:hover .elementor-button-icon.animation-background_to_top {
  -webkit-animation: toTopFromBottom 0.4s forwards;
          animation: toTopFromBottom 0.4s forwards;
}
.etheme-text-button:hover .elementor-button-icon.animation-switch_side:first-child {
  left: calc(100% + var(--icon-indent, 5px));
}
.etheme-text-button:hover .elementor-button-icon.animation-switch_side:last-child {
  right: calc(100% + var(--icon-indent, 5px));
}
.etheme-text-button .elementor-button-icon.animation-switch_side {
  position: absolute;
  -webkit-transition: left 0.5s cubic-bezier(0.19, 1, 0.22, 1), right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: left 0.5s cubic-bezier(0.19, 1, 0.22, 1), right 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.etheme-text-button .elementor-button-icon.animation-switch_side:first-child {
  left: calc(-1em - var(--icon-indent, 5px));
}
.etheme-text-button .elementor-button-icon.animation-switch_side:last-child {
  right: calc(-1em - var(--icon-indent, 5px));
}
@-webkit-keyframes toRightFromLeft {
  49% {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(100%);
            transform: translate(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toRightFromLeft {
  49% {
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(100%);
            transform: translate(100%);
  }
  51% {
    opacity: 1;
  }
}
@-webkit-keyframes toLeftFromRight {
  49% {
    -webkit-transform: translate(100%);
            transform: translate(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toLeftFromRight {
  49% {
    -webkit-transform: translate(100%);
            transform: translate(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
  }
  51% {
    opacity: 1;
  }
}
@-webkit-keyframes toBottomFromTop {
  49% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toBottomFromTop {
  49% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  51% {
    opacity: 1;
  }
}
@-webkit-keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes toTopFromBottom {
  49% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@-webkit-keyframes etheme-zoom {
  0%,
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes etheme-zoom {
  0%,
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.etheme-animated:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.etheme-animation-zoom {
  -webkit-animation-name: etheme-zoom;
          animation-name: etheme-zoom;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.etheme-animation-pulse {
  -webkit-animation-name: elementor-animation-pulse;
          animation-name: elementor-animation-pulse;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.etheme-animation-wobble-horizontal {
  -webkit-animation-name: elementor-animation-wobble-horizontal;
          animation-name: elementor-animation-wobble-horizontal;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

Cancel

🤩 File Manager - Mr.X

Editing:etheme-text-button.css