CSS Golden Button Effect for Modern Websites

Create a luxurious golden button effect using pure CSS, perfect for premium brands, call-to-actions, and elegant designs.

Why this works

By blending multiple shades of gold into a moving gradient and enhancing it with soft shadows, we create a premium, dynamic button effect without using images or external libraries.

Source Code

<button class="golden-button">Click Me</button>

<style>
.golden-button {
  background: linear-gradient(45deg, #d4af37, #ffd700, #f9c80e);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: background-position 0.5s ease, box-shadow 0.5s ease;
  cursor: pointer;
}
.golden-button:hover {
  background-position: right center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
</style>