Back

Crafting a Magical Levitating Button Effect

A thorough exploration of building a tactile, floating button that reacts to hovering with a mesmerizing lift and glow effect.

HTML

To create this magical levitating button effect, we'll start by setting up a simple HTML structure. We need a container div to center our button and a button element that will hold the mysterious hover effect.

        <div class="levitation-container">
          <button class="levitation-button">
            <span>Hover Me!</span>
          </button>
        </div>

CSS

Next, we'll dive into the CSS to craft our levitating illusion. We begin with the container styling. This will help center the button in the viewport and can make use of a soft, modern gradient background.

        .levitation-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: linear-gradient(145deg, #e6e7ee, #ffffff);
        }

Now, let's focus on the button itself. The levitation effect is achieved through smooth transitions and shadows that create depth, achieving a floating effect.

        .levitation-button {
          font-size: 16px;
          padding: 15px 30px;
          border: none;
          border-radius: 12px;
          background: linear-gradient(145deg, #f0f0f3, #c8c8c8);
          box-shadow: 8px 8px 15px #d1d9e6, -8px -8px 15px #ffffff;
          color: #31344b;
          cursor: pointer;
          transition: all 0.3s ease-in-out;
        }

When the user hovers over the button, CSS transitions and shadow adjustments will come into play, elevating the button visually as if it's floating above the surface, responding with touch-like precision.

        .levitation-button:hover {
          transform: translateY(-10px);
          box-shadow: 15px 15px 30px #d1d9e6, -15px -15px 30px #ffffff;
        }

With these simple yet magical steps, you can instantly add an engaging hover effect to your buttons, enhancing your user's interactive experience.

Whole code

<div class="levitation-container">
  <button class="levitation-button">
    <span>Hover Me!</span>
  </button>
</div>


<style>
.levitation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(145deg, #e6e7ee, #ffffff);
}
.levitation-button {
  font-size: 16px;
  padding: 15px 30px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #f0f0f3, #c8c8c8);
  box-shadow: 8px 8px 15px #d1d9e6, -8px -8px 15px #ffffff;
  color: #31344b;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.levitation-button:hover {
  transform: translateY(-10px);
  box-shadow: 15px 15px 30px #d1d9e6, -15px -15px 30px #ffffff;
}
</style>

Crafting a Magical Levitating Button Effect

HTML

CSS

Whole code

Comments

More buttons

Similar

See also