Back

Unlocking Mystery Buttons

A spectacular guide to crafting buttons that unveil hidden secrets.

HTML

For our HTML structure, we need a button container with a button.

      <div class="button-container">
        <button class="mystery-button"><span class="emoji">🔍</span> Discover</button>
      </div>

CSS

For the CSS, we use a combination of glassmorphism techniques to create a visually intriguing button effect. The '.button-container' gives the button an aesthetic backdrop with a blur effect and a subtle white border.

      .button-container {
        position: relative;
        display: inline-block;
        border-radius: 30px;
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        overflow: hidden;
      }

The '.mystery-button' itself is styled with gradients, text color, and smooth transitions for hover effects.

      .mystery-button {
        background: linear-gradient(145deg, #cfe8ff, #ffffff);
        color: #333;
        border: none;
        padding: 15px 30px;
        cursor: pointer;
        font-size: 16px;
        transition: transform 0.2s;
      }
      .mystery-button:active {
        transform: scale(0.95);      
      }

And there you have it, a dynamic, interactive mystery button!

Whole code

<div class="button-container">
  <button class="mystery-button"><span class="emoji">🔍</span> Discover</button>
</div>


<style>
.button-container {
  position: relative;
  display: inline-block;
  border-radius: 30px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.mystery-button {
  background: linear-gradient(145deg, #cfe8ff, #ffffff);
  color: #333;
  border: none;
  padding: 15px 30px;
  cursor: pointer;
  font-size: 16px;
  transition: transform 0.2s;
}
.mystery-button:active {
  transform: scale(0.95);
}

</style>

Thank you for reading this article.

Unlocking Mystery Buttons

HTML

CSS

Whole code

Comments

More buttons

Similar

See also