Back
A spectacular guide to crafting buttons that unveil hidden secrets.
<div class="button-container">
<button class="mystery-button"><span class="emoji">🔍</span> Discover</button>
</div>
.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!
<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.
Comments
No comments yet. Be the first to comment!