Liquid Split Button - Preview | DevPlatform

Liquid Split Button

jitesh208

Jan 20, 2026 2

Live Preview

Live Editor

<div class="btn-liquid">
  <span>Cancel</span>
  <span>Confirm</span>
</div>
.btn-liquid{
  display:flex;
  width:260px;
  border-radius:40px;
  overflow:hidden;
  background:#111;
}
.btn-liquid span{
  flex:1;
  padding:14px;
  text-align:center;
  color:#fff;
  cursor:pointer;
  transition:.4s;
}
.btn-liquid span:last-child{
  background:#12b76a;
}
.btn-liquid span:hover{
  flex:1.3;
}

Comments 0

Want to comment?

Please login or sign up to post comments.

No comments yet

Be the first to comment on this component!