CSS Snippet:

Silver Button

This CSS snippet creates a soft silver button style with a clean metallic gradient and subtle depth.

The result feels modern, minimal, and refined, making it a great option for elegant call-to-action buttons in neutral or tech-inspired designs.

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

Silver

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 clean, modern, and slightly elevated without introducing strong colour.

It works especially well for tech brands, minimal interfaces, dashboards, and modern service-based websites.

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

• UI buttons in clean layouts

This style works best when paired with neutral colour palettes and modern typography.

Notes & Setup

Select your button in Wix Studio.
Add the class: silver-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, and finish.

Customisation

Shape:

The fully rounded border-radius creates a smooth pill-style button, but you can adjust this to suit your design.

Finish:

The metallic look comes from the gradient and subtle inset shadows. Adjust the greys to create brighter or darker silver tones.

Spacing:

Modify the padding values to create smaller or larger buttons.

Tip:

This style pairs best with minimal layouts and clean typography for a modern, polished result.

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

.silver-button {
padding: 14px 28px;
border-radius: 999px;

border: none;
cursor: pointer;

background: linear-gradient(
160deg,
#ffffff 0%,
#f4f6f8 12%,
#d6dbe0 35%,
#bcc3ca 55%,
#aeb6bf 70%,
#dfe4e8 85%,
#f9fbfc 100%
);

box-shadow:
inset 0 1px 2px rgba(255,255,255,0.7),
inset 0 -2px 6px rgba(120, 130, 140, 0.25),
0 6px 16px rgba(80, 90, 100, 0.12);

color: rgba(90, 100, 110, 0.85);

transition: all 0.2s ease;
}