Code Button Chuyển Động Bằng Mouse Cho Blog.

Code Button Chuyển Động Bằng Mouse Cho Blog.

Dán Đoạn CSS Này Dươí Thẻ B:Skin.

.btn {

  position: relative;

  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  padding: 14px 50px;

  border-radius: 4px;

  border: none;

  color: #fff;

  cursor: pointer;

  outline: none;

  overflow: hidden;

  box-shadow: 0 14px 30px rgba(0,0,0,0.15);

  font-family: 'Lato', sans-serif;

  font-size: 16px;

  text-transform: uppercase;

  letter-spacing: 2px;

  

  span {

    position: relative;

  }

    

  &::before {

    --size: 0;

    content: '';

    position: absolute;

    left: var(--x);

    top: var(--y);

    width: var(--size);

    height: var(--size);

    background: radial-gradient(circle closest-side, #a3b1f1, transparent);

    transform: translate(-50%, -50%);

    transition: all .2s ease, left 0s, top 0s;

  }

  

  &:hover::before {

    --size: 200px;

  }

}

Dán Đoạn Này Trên Thẻ Đóng  </body

<script type='text/javascript'>

const btn = document.querySelector('.btn')

btn.onmousemove = function (e) {

  const x = e.pageX - btn.offsetLeft

  const y = e.pageY - btn.offsetTop

  

  btn.style.setProperty('--x', x + 'px')

  btn.style.setProperty('--y', y + 'px')

}

</script>

Cuối cùng là đoạn code hiển thị Button, chèn vào vị trí cần đặt.

<button class="btn">

  <span>Button</span>

</button>

DEMO

Code Được Lấy Từ  CodePen.  PC4x Edit + Share Về Blog.