Tạo button với hiệu ứng di chuột vô cùng độc đáo

Gần đây, Trong J2Team có share một mẫu button có hiệu ứng vô cùng độc lạ từ Prototypr. Thấy hay nên mang về share cho anh em Blogger xài!

Thêm đoạn CSS sau vào trước phần ]]></b:skin>.

.button {
position: relative;
appearance: none;
background: #5ea0e4;
padding: 1em 2em;
border: none;
color: white;
font-size: 1.2em;

cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 10px; }
.button span {
position: relative; }
.button::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #cb0ed8ba, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease; }
.button:hover::before {
--size: 400px; }

Sau đó thêm đoạn code bên dưới trước thẻ


</head>

. Đây là đoạn code quyết định đến hiệu ứng nên đừng bỏ qua nha!

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX - e.target.offsetLeft
const y = e.pageY - e.target.offsetTop
e.target.style.setProperty('--x', `${ x }px`)
e.target.style.setProperty('--y', `${ y }px`)
}
</script>

Cuối cùng là code để hiển thị button.