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>