Create a magnetic button using below code
Create this awesome magnetic button for your wordpress website.
- Add a HTML widget
- click on copy button and paste it in HTML widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnetic Button</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
.button-container {
position: relative;
width: 200px;
height: 60px;
overflow: hidden;
}
.magnetic-button {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #6a11cb, #2575fc);
color: white;
border: none;
border-radius: 30px;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 60px;
transition: transform 0.2s ease-out;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<div class="button-container">
<a href="https://example.com" class="magnetic-button" target="_blank">Click Me!</a>
</div>
<script>
const button = document.querySelector('.magnetic-button');
const container = document.querySelector('.button-container');
container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left - rect.width / 2;
const y = e.clientY - rect.top - rect.height / 2;
button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
});
container.addEventListener('mouseleave', () => {
button.style.transform = `translate(0, 0)`;
});
</script>
</body>
</html>
Create 3 D Button for your Dream website.
.button-3d {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: linear-gradient(145deg, #e74c3c, #c0392b);
border: none;
border-radius: 8px;
box-shadow: 6px 6px 12px #c0392b, -6px -6px 12px #e74c3c;
text-decoration: none;
transition: all 0.3s ease;
}
.button-3d:hover {
box-shadow: inset 6px 6px 12px #c0392b, inset -6px -6px 12px #e74c3c;
}