ColivingLiguria

Apply Now

Contact Buttons

2 min read

Contact Buttons & Social Links

Standard patterns for contact buttons across all offer pages.

Pattern: 4-Button Contact Grid (Current Best Practice)

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0;">
  
  <!-- WhatsApp -->
  <a href="https://wa.me/393396379372" 
     style="text-decoration: none; color: white; background: var(--whatsapp); padding: 1.5rem; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;" 
     target="_blank">
    <span style="font-size: 2rem;">💬</span>
    <span style="font-weight: bold;">Chat on WhatsApp</span>
  </a>
  
  <!-- Email -->
  <a href="mailto:colivingliguria@gmail.com" 
     style="text-decoration: none; color: white; background: var(--gmail); padding: 1.5rem; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;" 
     target="_blank">
    <span style="font-size: 2rem;">📧</span>
    <span style="font-weight: bold;">Email Us</span>
  </a>
  
  <!-- Instagram -->
  <a href="https://www.instagram.com/colivingliguria" 
     style="text-decoration: none; color: white; background: var(--instagram); padding: 1.5rem; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;" 
     target="_blank">
    <span style="font-size: 2rem;">📸</span>
    <span style="font-weight: bold;">Instagram</span>
  </a>
  
  <!-- Cal.com -->
  <a href="https://cal.com/simone.testino/colivingliguria-meeting" 
     style="text-decoration: none; color: white; background: var(--secondary); padding: 1.5rem; border-radius: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;" 
     target="_blank">
    <span style="font-size: 2rem;">📅</span>
    <span style="font-weight: bold;">Book a Call</span>
  </a>
  
</div>

Key Features:

  • ✅ Responsive 4-column grid
  • ✅ Brand colors via CSS variables (var(--whatsapp), var(--gmail), var(--instagram))
  • ✅ Flexbox for vertical centering
  • ✅ Large emoji icons (2rem)
  • ✅ Consistent padding and spacing

Pattern: Apply Now Button

Large, centered call-to-action button.

<div style="text-align: center; margin-top: 2rem;">
  <a href="/apply" 
     style="display: inline-block; padding: 1rem 3rem; background: var(--secondary); color: white; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 1.1rem;">
    Apply Now
  </a>
</div>

Key Features:

  • ✅ Uses var(--secondary) (auto-adapts light/dark)
  • ✅ Large padding for prominence
  • ✅ Bold, slightly larger font

Pattern: Compact Contact List

For footer sections or compact layouts.

<div style="text-align: center; margin-top: 2rem; color: var(--gray); font-size: 0.9rem;">
  <p>By Simone Testino</p>
  <p style="margin-top: 0.5rem;">
    📧 colivingliguria@gmail.com | 📱 +39 339 637 9372
  </p>
  <p style="margin-top: 0.5rem;">
    📍 <a href="https://maps.app.goo.gl/B6dYxZpMF8CGPViJ7" style="color: var(--secondary);">Google Maps</a>
  </p>
</div>

Key Features:

  • ✅ Muted color (var(--gray))
  • ✅ Links use var(--secondary)
  • ✅ Compact spacing

❌ What NOT to Do

<!-- BAD: Hardcoded brand colors -->
<a style="background: #25D366;">
 
<!-- BAD: No target="_blank" for external links -->
<a href="https://wa.me/...">
 
<!-- BAD: Missing text-decoration: none -->
<a href="..." style="color: white;">

✅ Best Practices

  1. Use CSS variables for all colors (var(--whatsapp), var(--gmail), etc.)
  2. Always include target="_blank" for external links
  3. Remove default link styling with text-decoration: none
  4. Use emojis for visual interest (2rem size)
  5. Ensure adequate padding for touch targets (1.5rem minimum)
  6. Use responsive grids (auto-fit, minmax(200px, 1fr))

Graph View

Backlinks