Anticipation Effect

jitesh208

Jan 20, 2026 2

Live Preview

Live Editor

<button class="btn-mind">Pay ₹6,000</button>
.btn-mind{
  padding:18px 44px;
  border-radius:40px;
  background:#0d0f14;
  color:#fff;
  font-size:16px;
  position:relative;
  overflow:hidden;
}
.btn-mind::after{
  content:"Ready?";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#12b76a;
  transform:translateY(100%);
  transition:.4s cubic-bezier(.16,1,.3,1);
}
.btn-mind:hover::after{
  transform:translateY(0);
}

Comments 0

Want to comment?

Please login or sign up to post comments.

No comments yet

Be the first to comment on this component!

Categories

Anticipation Effect

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet