Back

Crafting a Hovering Mood Button with Delightful Interactivity

An innovative tutorial to design a mood-sensitive button that floats and changes its style based on user interaction, creating a tactile, whimsical user experience.

HTML

Our HTML structure is quite simple, consisting of just a single button element that will serve as our mood button.

        <button class="mood-button">Hover Me!</button>

Javascript

Our JavaScript will handle the interaction for the mood button. We'll use event listeners to change the button text and style when the mouse enters and leaves the button area.

        document.querySelector('.mood-button').addEventListener('mouseenter', function() {
            this.textContent = 'Feeling Happy';
            this.classList.add('happy');
        });
        document.querySelector('.mood-button').addEventListener('mouseleave', function() {
            this.textContent = 'Hover Me!';
            this.classList.remove('happy');
        });

CSS

In our CSS, we'll incorporate some claymorphic design principles with subtle shadows and no hard edges. Additionally, we'll animate the button to appear to float slightly when hovered over.

        .mood-button {
            background: linear-gradient(145deg, #f0f0f0, #cacaca);
            border: none;
            border-radius: 50px;
            padding: 10px 20px;
            cursor: pointer;
            box-shadow: 6px 6px 12px #acacac, -6px -6px 12px #ffffff;
            transition: all 0.3s ease-in-out;
            color: #333;
            font-weight: bold;
        }

        .mood-button:hover {
            transform: translateY(-10px);
            box-shadow: 8px 8px 16px #ababab, -8px -8px 16px #ffffff;
        }

        .happy {
            background: linear-gradient(145deg, #a8ff78, #78ffd6);
            color: #fff;
        }

This combination of JavaScript and CSS results in a button that responds to user interaction with delightful visual feedback, using a combination of visual trends to create a playful and engaging experience.

Whole code

<button class="mood-button">Hover Me!</button>

<script>
document.querySelector('.mood-button').addEventListener('mouseenter', function() {
  this.textContent = 'Feeling Happy';
  this.classList.add('happy');
});
document.querySelector('.mood-button').addEventListener('mouseleave', function() {
  this.textContent = 'Hover Me!';
  this.classList.remove('happy');
});
</script>

<style>
.mood-button {
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  border: none;
  border-radius: 50px;
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: 6px 6px 12px #acacac, -6px -6px 12px #ffffff;
  transition: all 0.3s ease-in-out;
  color: #333;
  font-weight: bold;
}
.mood-button:hover {
  transform: translateY(-10px);
  box-shadow: 8px 8px 16px #ababab, -8px -8px 16px #ffffff;
}
.happy {
  background: linear-gradient(145deg, #a8ff78, #78ffd6);
  color: #fff;
}
</style>

Crafting a Hovering Mood Button with Delightful Interactivity

HTML

Javascript

CSS

Whole code

Comments

More buttons

Similar

See also