🔘 Custom Hover Button Animation with WhatsApp Icon – Step-by-Step Hindi Tutorial

🔘 HTML और CSS से Custom Hover Button बनाना – सरल हिंदी में गाइड

अगर आप अपनी वेबसाइट या प्रोजेक्ट में आकर्षक और इंटरएक्टिव बटन (Button) बनाना चाहते हैं, तो यह Follow Me Button Animation Project आपके लिए एकदम सही है। इस ट्यूटोरियल में आप सीखेंगे कि कैसे एक सिंपल बटन से, होवर (hover) पर टेक्स्ट और आइकन (SVG WhatsApp Icon) के साथ शानदार ट्रांजिशन बना सकते हैं – सिर्फ HTML और CSS की मदद से, बिना किसी JavaScript के।

यह डिज़ाइन बिलकुल मॉर्डन है, मोबाइल और डेस्कटॉप दोनों के लिए उपयुक्त है।

🧾 1. HTML Structure

HTML कोड बहुत ही सिंपल हैः

Follow me

• button टैग के अंदर एक `` टैग में बटन का टेक्स्ट है।
• `` टैग में WhatsApp आइकन है (SVG कोड छोटा किया गया है, आप पूरा कोड पेस्ट करें)।

🎨 2. Button Design (CSS से Styling)

🔹 Base Styling:

button {
  background-color: #fff;
  border: 1px solid #0077b5;
  padding: 5px;
  position: relative;
  width: 7.2em;
  height: 2em;
  transition: 0.5s;
  font-size: 17px;
  border-radius: 0.4em;
}

• सफ़ेद बैकग्राउंड, नीला बॉर्डर और हल्का rounded corner।
• transition से smooth animation।

🏷️ Text Positioning:

button p {
  position: absolute;
  top: 0.4em;
  left: 1.2em;
  margin: 0;
  padding: 0;
  transition: 0.5s;
  color: #0077b5;
}

• टेक्स्ट को बटन के भीतर position: absolute से कंट्रोल किया जाता है।
• टेक्स्ट के रंग को ब्रांड कलर (यहां #0077b5 – LinkedIn Blue) से सेट किया गया है।

🟢 SVG WhatsApp Icon Styling:

button svg {
  position: absolute;
  top: 0.45em;
  right: 0.5em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  height: 1em;
  fill: #fff;
}

• आइकन को बटन के right-top कॉर्नर पर रखा गया है।
• by default opacity: 0 – यानी शुरुआत में नहीं दिखता।
• fill: #fff – ताकि hover पर आइकन दिखे तो सफ़ेद दिखे।

🖱️ 3. Hover Animation Details

🔄 Button Hover State:

button:hover {
  background-color: #0077b5;
}

• जैसे ही माउस बटन पर आता है, बैकग्राउंड नीला हो जाता है।

📝 Text Hover Animation:

button:hover p {
  left: 0.6em;
  color: #fff;
}

• On hover: टेक्स्ट थोड़ा left shift होता है और रंग सफ़ेद हो जाता है।

🟢 SVG Icon Hover Animation:

button:hover svg {
  opacity: 1;
}

• hover पर svg icon fade-in होकर दिखने लगता है।

📋 Element Wise Summary Table

🔍 Important Concepts Explained

✳️ 1. position: absolute; and Container

• पेरेंट (button) को relative और child (p और svg) को absolute देने से आप आसानी से बटन के अंदर content position कर सकते हैं।
• hover पर left और color बदलने से टेक्स्ट smooth effect के साथ खिसकता है।

👀 2. transition: 0.5s;

• यह property बटन और उसके अंदर के सभी changes (color, opacity, position) को smooth और शांत बनाती है।
• बिना transition सब कुछ jumpy लगेगा, और UX खराब होगा।

🟢 3. SVG Icons क्यों?

• SVG vector graphics हैं – यह किसी भी size पर sharp दिखते हैं।
• Modern browsers में perfect support।
• CSS से colors, size, आदि पर पूरा control।

🤔 4. Hover पर Icon क्यों fade होता है?

• जब यूज़र बटन पर होवर करता है तब ही attention-grabbing व्हाट्सऐप आइकन दिखे, वरना बटन minimal दिखे।
• जिससे interaction special feel होता है।

✏️ 5. Brand Colors कैसे चुनें?

• यहाँ LinkedIn blue (#0077b5) का इस्तेमाल किया गया है; आप WhatsApp का (#25d366) या अपनी ब्रांड का color replace कर सकते हैं।

✅ Copy-Paste Ready Example

Complete HTML:

Follow me

Complete CSS:

button {
  background-color: #fff;
  border: 1px solid #0077b5;
  padding: 5px;
  position: relative;
  width: 7.2em;
  height: 2em;
  transition: 0.5s;
  font-size: 17px;
  border-radius: 0.4em;
}

button p {
  position: absolute;
  top: 0.4em;
  left: 1.2em;
  margin: 0;
  padding: 0;
  transition: 0.5s;
  color: #0077b5;
}

button svg {
  position: absolute;
  top: 0.45em;
  right: 0.5em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  height: 1em;
  fill: #fff;
}

button:hover p {
  left: 0.6em;
  color: #fff;
}

button:hover svg {
  opacity: 1;
}

button:hover {
  background-color: #0077b5;
}

👨💻 Tips & Variations

• आप आइकन को Left-Side पर या fade+slide-in motion से भी animate कर सकते हैं।
• Gradient background, border-shadow या Sound effect डालने का विकल्प भी खुला है।
• बटन के टेक्स्ट और आइकन को swap कर सकते हैं।

✍️ लेखक: सिद्धार्थ जैन
📅 प्रकाशन तिथि: 7 अगस्त 2025