Button Randomly Change Position when Hover in HTML CSS Javascript

Hi guys! In this blog, we will learn how to make button randomly change position when hover in HTML CSS and Javascript.

Hey, web design enthusiasts, We’re about to dive into something super cool that’s taking the internet by storm, buttons that go all wacky when you hover over them. Picture this, you’re browsing a website, and you hover your mouse over a button. Instead of just sitting there, it goes bonkers, randomly shifting to a new spot on the screen. It’s like a mini rollercoaster ride on the web. So, let’s break it down and find out why these buttons are making web design more exciting.

Video Tutorial:

You can also watch a video tutorial on this blog, “Button Randomly Change Position on Hover – Unclickable Button using Javascript” in the video below. Everything is done step by step, you can check out this video.

The Surprise Factor: Button that Do Their Thing

Imagine you’re clicking around a website, and suddenly, you come across a button that doesn’t follow the usual rules. When you hover over it, it doesn’t stay put, it decides to have a little adventure, jumping to a different spot on your screen. It’s like a little surprise party in the digital world.

So, how do they do it? When you hover your mouse over the button, it triggers a transformation through fancy CSS animations or transitions, making the button randomly move to a new location on the web page. The idea is to not only engage users but also to make browsing more interesting and interactive.

The Art of CSS Animation and Transition

To get how these buttons randomly change position on hover, you gotta understand CSS animations and transitions. They’re like the secret sauce that makes these web elements come to life.

CSS Animation: CSS animation are like magic spells that let web designers make stuff move on a webpage. You set keyframes to define specific moments in the animation, and those keyframes tell the element how to change during the animation, creating super cool effects.

CSS Transition: CSS transition, on the other hand, make things change smoothly. They kick in when a CSS property changes, like when you hover over a button. Instead of an abrupt change, the property shifts gradually over a set duration, creating various effects.

For buttons that randomly change position, CSS animation and transition, also using javascript are the tools to modify properties like position, top, left, or transform and make the button dance around the screen.

Why Are Randomly Shifting Button So Awesome?

Randomly shifting button on hover are a game changer for web design:

Super Engaging: These button grab your attention because you never know what they’ll do next. They make users curious and excited.

Pure Fun: By breaking the usual button behavior, they bring a sense of playfulness to the user experience. It’s like playing a digital game of hide and seek.

Unforgettable: Things that surprise and delight users tend to stick in their memory. This unique interaction makes a lasting impression.

Explore More: Button that move around encourage users to check out different parts of a website, making navigation more interactive.

Eye-Catching: Beyond being fun, these buttons add a dynamic and eye-catching element to web design, making it more memorable.

How to Add Random Button Movement to Your Site

Feeling inspired to give your website some wacky buttons?? Here’s a simple guide to get you started:

HTML Structure: Start by setting up the HTML structure for your button. Create a button element and add your text or content to it.

Basic Styling: Use CSS to style your button. Define its size, shape, color, and other visual properties.

Initial Position: Position your button in its starting spot. This is where it hangs out when it’s not being hovered over.

CSS Transition: Apply a CSS transition to the button. This transition will control the timing and style of the hover effect. Define the properties you want to change when the button is hovered over, like position, top, left, or transform.

Hover Magic: Use the “:hover” pseudo-class in CSS to define what happens when the button is hovered over. Adjust the properties you’ve set to create the random effect. For a truly random movement, you can use JavaScript or random CSS properties.

Source Files – Button Randomly Change Position:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Question Box & Button Randomly Change Position | Codehal</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <i class="fa-solid fa-circle-question"></i>
        <h2 class="question">Do you love me ?</h2>
        <div class="btn-group">
            <button class="yes-btn">Yes</button>
            <button class="no-btn">No</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
*::selection {
    background: #7d2ae8;
    color: #fff;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #7d2ae8;
}
.wrapper {
    position: relative;
    width: 600px;
    height: 400px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
i {
    font-size: 7.5em;
    color: #7d2ae8;
    border: 5px solid transparent;
    outline: 3px solid #7d2ae8;
    border-radius: 50%;
}
h2 {
    font-size: 3em;
    color: #7d2ae8;
    margin: 15px 0;
}
.btn-group {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
button {
    position: absolute;
    width: 150px;
    height: inherit;
    font-size: 1.2em;
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    border: 2px solid #7d2ae8;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
button:nth-child(1) {
    margin-left: -200px;
    background: #7d2ae8;
}
button:nth-child(2) {
    margin-right: -200px;
    color: #7d2ae8;
}

JavaScript Code:

const wrapper = document.querySelector('.wrapper');
const question = document.querySelector('.question');
const yesBtn = document.querySelector('.yes-btn');
const noBtn = document.querySelector('.no-btn');
const wrapperRect = wrapper.getBoundingClientRect();
const noBtnRect = noBtn.getBoundingClientRect();
yesBtn.addEventListener('click', () => {
    question.innerHTML = 'I Love You Too :)';
});
noBtn.addEventListener('mouseover', () => {
    const i = Math.floor(Math.random() * (wrapperRect.width - noBtnRect.width)) + 1;
    const j = Math.floor(Math.random() * (wrapperRect.height - noBtnRect.height)) + 1;
    noBtn.style.left = i + 'px';
    noBtn.style.top = j + 'px';
});

Conclusion

Button that randomly change position on hover bring a new level of fun and excitement to web design. They break away from the ordinary and add a playful and unpredictable element to the user experience. As web design keeps evolving, we can expect to see even more innovative uses of this effect.

Their power to engage users, encourage exploration, and create memorable interactions makes them a valuable addition to the web designer’s toolbox. So, if you’re looking to inject some surprise and delight into your website, consider adding buttons that randomly change position on hover. With their unexpected movements and playful behavior, they have the potential to create a memorable and interactive user experience that keeps visitors engaged and entertained.