How to Create a WhatsApp Button with HTML and CSS

by

Adding a WhatsApp button to your website is a great way to let users contact you directly with one click. In this tutorial, you’ll learn how to create a floating WhatsApp button using only HTML and CSS — no JavaScript required!

It will stay fixed at the bottom right corner of the screen and open a predefined message in a new tab.

👁️ Preview

🧱 Step 1: Basic HTML Structure

We’ll start with a simple <a> link that points to your WhatsApp chat.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WhatsApp Button</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- WhatsApp Button -->
  <a 
    href="https://wa.me/15551234567?text=Hello%2C%20I%20visited%20your%20website%20and%20would%20like%20to%20chat!" 
    class="whatsapp-button" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    💬 WhatsApp
  </a>

</body>
</html>

✅ Important Details

  • Replace 15551234567 with your actual number (country code + area code + number, no symbols).
  • Use ?text= followed by a URL-encoded message (use %20 for spaces).
  • target="_blank" ensures it opens in a new tab.
  • rel="noopener noreferrer" improves security.

🎨 Step 2: Style the Floating Button with CSS

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
  z-index: 9999;
}

.whatsapp-button:hover {
  background-color: #20b358;
}

🧠 How the Button Works

  • position: fixed keeps the button always visible even when scrolling.
  • bottom and right position it at the bottom-right corner.
  • The green color #25D366 is WhatsApp’s official branding.
  • box-shadow adds depth, making it stand out from the page.

🧪 Optional: Add an Icon Instead of Text

You can use a WhatsApp icon image or embed an SVG if you prefer a minimalist look:

<a href="https://wa.me/15551234567?text=Hello!" class="whatsapp-button" target="_blank">
  <img src="whatsapp-icon.svg" alt="WhatsApp" width="30" />
</a>

✅ Final Result

You now have a fully working WhatsApp button that:

  • Opens a new chat with a predefined message
  • Stays fixed at the corner of the screen
  • Can be styled to match your website design
  • Requires no JavaScript or plugins

🧩 Bonus Tips

  • You can use media queries to hide it on desktop or mobile only.
  • Use a shorter message for better readability on mobile.
  • Add tracking to the link with UTM parameters if you use Google Analytics.

Leave a Comment