Glow Slide Border

jitesh208
Jan 17, 2026 2
Live Preview

Live Editor

<button class="btn-animated">
  <span>Get Started</span>
</button>
body{
 background:#000;
}

.btn-animated {
  position: relative;
  padding: 14px 34px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

/* Gradient Border */
.btn-animated::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(
    120deg,
    #00f5ff,
    #7cff00,
    #ff00d4
  );
  background-size: 300% 300%;
  animation: borderMove 4s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

/* Button Background */
.btn-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0b0b0f;
  border-radius: 10px;
  z-index: -2;
}

/* Text animation */
.btn-animated span {
  position: relative;
  z-index: 2;
}

/* Hover Effect */
.btn-animated:hover {
  transform: translateY(-2px);
}

.btn-animated:hover::after {
  background: linear-gradient(135deg, #121212, #1b1b1f);
}

/* Glow on hover */
.btn-animated:hover::before {
  filter: blur(6px);
}

/* Animation */
@keyframes borderMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
Categories

Glow Slide Border

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
