CSS Snippet:

Antique Brass Button

This CSS snippet creates a soft antique brass button style with a warm metallic gradient and subtle depth.

The result feels refined, tactile, and slightly vintage, making it a strong choice for premium call-to-action buttons with a more heritage-inspired look.

Difficulty:

Intermediate

Promotion

Need help with your Wix website?

Fix a problem, rebuild your site, or get your SEO set up properly.

Expert Wix support, exactly when you need it.

Find out more

Start Now

Live preview

Antique Brass

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 warm, understated, and more characterful than modern metallic finishes.

It works especially well for interior design brands, premium services, editorial-style sites, and darker UI themes.

Where to apply it

Apply this class to button elements only.

Common examples include:

• Primary call-to-action buttons

• Hero section buttons

• Feature or service links

• Premium enquiry buttons

This style pairs particularly well with darker backgrounds and muted colour palettes.

Notes & Setup

Select your button in Wix Studio.
Add the class: antique-brass-button
Paste the CSS into your site's Custom CSS section.

Use the Wix Design panel to control the button text style and layout. This snippet focuses on the surface and finish.

Customisation

Shape:

This version uses a softer rounded rectangle (15px radius) instead of a full pill shape, giving it a more structured, classic feel.

Finish:

The metallic effect comes from the gradient and inset shadows. You can deepen the tones for a darker brass or soften them for a lighter finish.

Spacing:

Adjust padding values to change the overall button size.

Tip:

This style works particularly well in darker, more atmospheric designs where the brass tones can stand out.

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

.antique-brass-button {
padding: 14px 28px;
border-radius: 15px;

border: none;
cursor: pointer;

background: linear-gradient(
160deg,
#f6f1e6 0%,
#e2d3b0 12%,
#bfa36a 35%,
#9a7b47 55%,
#8c6f3f 70%,
#cbb27a 85%,
#f3ead4 100%
);

box-shadow:
inset 0 1px 2px rgba(255,255,255,0.6),
inset 0 -2px 6px rgba(90, 70, 40, 0.25),
0 6px 16px rgba(40, 30, 10, 0.18);

color: rgba(70, 55, 30, 0.9);

transition: all 0.2s ease;
}