Glowing Button

aartigoyal
Jan 30, 2026 4
Live Preview

Live Editor

<!-- Required HTML -->
<body>
  <button><span>Contact Us</span></button>
</body>

:root {
  --border: 1vh;
  --radius: 75vh
}

html {
  width: 100%;
  height: 100%
}

body {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

button {
  padding: 15vh 50vh;
  background: #000;
  color: #fff;
  font-family: monospace;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  
  animation: glow linear 2s infinite;
  
  position: relative
}

button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1/1;
  width: 150%;
  height: auto;
  border-radius: 50%;
  background: conic-gradient(#fff 0%, #000 3%, #409 60%, #fff 100%);
  animation: spin linear 2s infinite;
  transform: translate(-50%, -50%)
}

button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - var(--border));
  height: calc(100% - var(--border));
  background: #000d;
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  backdrop-filter: blur(10vh);
}

button span {
  display: block;
  position: absolute;
  text-wrap: nowrap;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Geo", monospace;
  font-size: 12.5vh;
  text-transform: uppercase
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg)
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

@keyframes glow {
  0% {
    border: 0 transparent solid;
  }
  25% {
    border: 15px #4094 solid;
  }
  50% {
    border: 30px transparent solid;
  }
  100% {
    border: 0 transparent solid;
  }
}
Categories

Glowing Button

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
