CSS Snippet:
Chat Bubble Button
This CSS snippet creates a chat-style button inspired by messaging apps like WhatsApp. It uses subtle inner shadows and an asymmetrical border radius to create a soft “bubble” effect, without relying on pseudo-elements.
The result is a clean, modern call-to-action that feels familiar, friendly, and highly clickable.
Difficulty:
Easy
Live preview
Chat Bubble
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 to create a conversational or messaging-style call-to-action.
It works particularly well for contact buttons, WhatsApp links, live chat triggers, or any CTA where you want the interaction to feel more human and approachable rather than corporate or formal.
Where to apply it
Apply this class to buttons used for messaging, enquiries, or quick-contact actions.
Common examples include:
• “Message Us” or “Chat Now” buttons
• WhatsApp contact links
• Support or help CTAs
• Floating contact buttons
This style works best when paired with short, action-focused labels.
Notes & Setup
Select your button in Wix Studio.
Add the class: chat-bubble-button
Paste the CSS into your site's Custom CSS section.
Adjust the background colour to match your brand, and tweak the border radius if you want the “tail” to appear on a different corner.
You can also adjust padding, shadows, and hover effects to make the button feel softer or more pronounced.
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
.chat-bubble-button {
padding: 14px 24px; /* adjust size */
/* Shape */
border-radius: 24px 24px 0px 24px; /* change corner to move the "tail" */
/* Base colour */
background: #25D366; /* change for brand colour */
border: none;
cursor: pointer;
/* Bubble effect */
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.3), /* top highlight */
inset 0 -4px 8px rgba(0, 0, 0, 0.15), /* bottom shading */
0 4px 10px rgba(0, 0, 0, 0.15); /* outer shadow */
transition: all 0.25s ease;
}
/* Text inside Wix button */
.chat-bubble-button * {
color: #fff !important; /* change text colour */
font-weight: 600 !important; /* adjust weight */
}
/* Hover */
.chat-bubble-button:hover {
transform: translateY(-2px); /* lift effect */
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -4px 10px rgba(0, 0, 0, 0.2),
0 8px 18px rgba(0, 0, 0, 0.2);
}
/* Optional active (press effect) */
.chat-bubble-button:active {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.2),
inset 0 -2px 4px rgba(255, 255, 255, 0.2);
}
.jpg)