Login
Elements

Button Circle Inside Hover

20 Sep 2022

HTML
SCSS
PostCSS
JS 
                            <div class="flex-wrap">
  <div class="btn">Button 1</div>
  <div class="btn">Button 2</div>
  <div class="btn">Button 3</div>
</div>

                        
                            .flex-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -35px;
}

.btn {
  padding: 20px 40px;
  border-radius: 15px;
  position: relative;
  color: var(--white);
  border: solid 1px var(--white);
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  @include transition-all;
  overflow: hidden;
  margin-right: 35px;

  span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 300px;
    background-color: var(--white);
    transition: width 0.25s ease, height 0.25s ease;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  &:hover {
    color: #ffffff;

    span {
      width: 300px;
      height: 300px;
    }
  }

  &:active {
    background-color: var(--white);
  }
}
                        
                            .flex-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -35px;
}

.btn {
  padding: 20px 40px;
  border-radius: 15px;
  position: relative;
  color: var(--white);
  border: solid 1px var(--white);
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  @mixin transition-all;
  overflow: hidden;
  margin-right: 35px;

  span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 300px;
    background-color: var(--white);
    transition: setTransition(width, height);
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  &:hover {
    color: #ffffff;

    span {
      width: 300px;
      height: 300px;
    }
  }

  &:active {
    background-color: var(--white);
  }
}
                        
                            const btnArr = Array.from(document.getElementsByClassName(`btn`));
btnArr.forEach((elem) => elem.insertAdjacentHTML("beforeend", `<span></span>`));

$(".btn")
  .on("mouseenter", function (e) {
    var parentOffset = $(this).offset(),
      relX = e.pageX - parentOffset.left,
      relY = e.pageY - parentOffset.top;
    $(this).find("span").css({ top: relY, left: relX });
  })
  .on("mouseout", function (e) {
    var parentOffset = $(this).offset(),
      relX = e.pageX - parentOffset.left,
      relY = e.pageY - parentOffset.top;
    $(this).find("span").css({ top: relY, left: relX });
  });

// Transition function for pcss
export const setTransition = (...props) => {
    if (props[0].endsWith("s")) {
        const duration = props[0];

        return props
            .map((prop, idx) => {
                if (idx > 0) return `${prop} ${duration}`;
            })
            .join(", ");
    } else {
        return props.map((prop) => `${prop} 250ms`).join(", ");
    }
};
0