Back

Crafting a Hover-Activated Sculptural Button

A delightful journey into creating a responsive button that morphs with a touch of modern artistry, offering a tactile visual experience.

HTML

Let's start with the HTML structure of our sculpture button. We have a wrapping <div> with class "sculpture-container," which centers our button both vertically and horizontally.


        <div class="sculpture-container">
          <button class="sculpture-button">
            <span class="sculpture-text">Press Me</span>
          </button>
        </div>

JavaScript

The JavaScript code is minimal and focuses on detecting hover events to animate the button accordingly. We add an event listener for the mouseover event to apply the hovered effect and another for mouseout to remove it.


        document.querySelector('.sculpture-button').addEventListener('mouseover', function() {
           this.classList.add('hovered');
        });
        document.querySelector('.sculpture-button').addEventListener('mouseout', function() {
           this.classList.remove('hovered');
        });

CSS

For CSS, we are embracing claymorphism with soft colors and shadows to give a 3D effect. The .sculpture-container class centers our button on the page using Flexbox.


        .sculpture-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }

The .sculpture-button class is where most of our styles are applied:

We use a linear gradient for the button's background to create an elevated look.
A border-radius of 20px gives subtle rounded corners.
Claymorphic shadows on the button create the 3D effect.
The transform property with a rotation and scaling effect is applied when hovered.


        .sculpture-button {
          background: linear-gradient(145deg, #ffffff, #e6e6e6);
          border-radius: 20px;
          border: none;
          padding: 20px 40px;
          box-shadow: 5px 5px 10px #cccccc,
                      -5px -5px 10px #ffffff;
          transition: transform 0.3s ease;
          cursor: pointer;
        }

The .sculpture-text class styles the text inside the button:

We set a bold font style to make it more prominent.
There's a color transition on hover to captivate the user's attention.


        .sculpture-text {
          font-family: 'Arial', sans-serif;
          font-weight: bold;
          font-size: 18px;
          color: #333333;
          transition: color 0.3s ease;
        }

And there you have it! With these few steps, you've created a visually dynamic button that's both fun and functional.

Whole code

<div class="sculpture-container">
  <button class="sculpture-button">
    <span class="sculpture-text">Press Me</span>
  </button>
</div>

<script>
document.querySelector('.sculpture-button').addEventListener('mouseover', function() {
  this.classList.add('hovered');
});
document.querySelector('.sculpture-button').addEventListener('mouseout', function() {
  this.classList.remove('hovered');
});
</script>

<style>
.sculpture-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.sculpture-button {
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  border-radius: 20px;
  border: none;
  padding: 20px 40px;
  box-shadow: 5px 5px 10px #cccccc,
              -5px -5px 10px #ffffff;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.sculpture-button.hovered {
  transform: scale(1.1) rotate(-3deg);
}
.sculpture-text {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  transition: color 0.3s ease;
}
.sculpture-button.hovered .sculpture-text {
  color: #007bff;
}
</style>

Thank you for reading this article.

Crafting a Hover-Activated Sculptural Button

HTML

JavaScript

CSS

Whole code

Comments

More buttons

Similar

See also