Split Reveal Button

jitesh208

Jan 17, 2026 2

Live Preview

Live Editor

<button class="btn-split"><span>Launch</span></button>
body{
   background:grey
 }

.btn-split{
  position:relative;
  padding:14px 36px;
  background:#000;
  color:#fff;
  overflow:hidden;
  border-radius:10px;
}
.btn-split span::before,
.btn-split span::after{
  content:"Launch";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  transition:.4s;
}
.btn-split:hover span::before{top:-100%}
.btn-split:hover span::after{bottom:-100%}

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

Split Reveal Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet