CSS Snippet:
Rose Gold Button
This CSS snippet creates a soft rose gold button style with a glossy metallic gradient and gentle depth.
The finish feels premium and tactile without relying on heavy 3D effects, making it a clean and reliable option for elegant call-to-action buttons.
Difficulty:
Intermediate
Live preview
Rose Gold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Use case
Use this button style when you want a CTA to feel polished, warm, and elevated while still remaining clean and usable.
It works especially well on premium brand sites, luxury-inspired layouts, beauty and fashion projects, and any interface using soft metallic tones.
Where to apply it
Apply this class to button elements only.
Common examples include:
• Primary call-to-action buttons
• Hero section buttons
• Product or service links
• Premium sign-up or enquiry buttons
This style works best when paired with soft neutral backgrounds or other rose gold accents.
Notes & Setup
Select your button in Wix Studio.
Add the class: rose-gold-button
Paste the CSS into your site's Custom CSS section.
Use the Wix Design panel to control the button text style, font, size, and alignment. This snippet focuses on the button surface, shape, colour, and finish.
Customisation
Shape:
The fully rounded border-radius gives this button a smooth pill shape, but you can reduce this if you want a more standard rounded button.
Finish:
The metallic effect comes from the gradient and soft inset shadows. You can deepen the look by making the darker colour stops richer, or soften it by increasing the pale tones.
Spacing:
Adjust the padding values to create a smaller or larger button depending on your layout.
Tip:
This style pairs especially well with soft backgrounds, elegant typography, and matching rose gold containers or text accents.
Licensing
This CSS snippet is free to use in personal and commercial Wix Studio projects. You’re welcome to copy, adapt, and use it on client or business websites.
Credit is not required, but if you found it useful, we’d really appreciate a small link back to Wix Doctor, ideally on your site’s footer, about page, credits page or wherever feels appropriate.
Linking back helps more Wix users discover the library and supports the continued creation of free snippets, tutorials, and community resources.
CSS Code
css
.rose-gold-button {
padding: 14px 28px;
border-radius: 999px;
border: none;
cursor: pointer;
background: linear-gradient(
160deg,
#ffffff 0%,
#fdf1ec 12%,
#f3c3b8 35%,
#e6a79a 55%,
#d48a7c 70%,
#f4c2b5 85%,
#fff1ec 100%
);
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.6),
inset 0 -2px 6px rgba(184, 110, 97, 0.25),
0 6px 16px rgba(90, 28, 28, 0.12);
color: rgba(120, 55, 48, 0.85);
transition: all 0.2s ease;
}
