Document SUBSCRIBE

CSS BUTTON HOVER ANIMATION EFFECTS

यहाँ हमने एक सब्सक्राइब बटन बनाया है जिसमें होवर एनीमेशन इफ़ेक्ट है। जैसे ही उपयोगकर्ता बटन पर माउस ले जाएगा, एनीमेशन चलना शुरू हो जाएगा।

HTML Code :-

HTML संरचना:

a टैग का उपयोग एक क्लिक करने योग्य बटन बनाने के लिए किया गया है, जिसका टेक्स्ट "SUBSCRIBE" है। बटन में चार span एलिमेंट्स होते हैं, जो होवर एनीमेशन प्रभाव बनाने के लिए उपयोग किए जाते हैं।

CSS Code :-

*{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
        }
        a{
            border-radius: 12px;
            border: 3px outset #888;
            position: relative;
            display: inline-block;
            color: #eee;
            padding: 15px 30px;
            text-transform: uppercase;
            letter-spacing: 4px;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, 1);
            font-family: verdana;
            font-size: 28px;
            font-weight: bolder;
            text-decoration: none;
            background: linear-gradient(160deg, #666, #444);
            text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
            transition: 0.2s;
        }
        a:hover{
            border: 3px outset #ddd;
            color: #fff;
            background: linear-gradient(160deg, #666, #444);
            color: deepskyblue;
            text-shadow: 0 0 4px #ccc;
            box-shadow: 0 0 10px #fff,
            0 0 4px #fff,
            0 0 80px deepskyblue;
            transition-delay: 1s;
        }
        a span{
            position: absolute;
            display: block;

}
        a span:nth-child(1){
            top:0 ;
            left: -100%;
            width: 100%;
            height: 4px;
            border: linear-gradient(90deg, transparent, #eee);

}
        a:hover span:nth-child(1){
            left: 100%;
            transition: 1s;
        }
        a span:nth-child(2){
            top: -100%;
            right: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, transparent, skyblue);
        }
        a:hover span:nth-child(2){
            top: 100%;
            transition: 1s;
            transition-delay: 0.25s;
        }
        a span:nth-child(3){
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 4px;
            background: linear-gradient(270deg, transparent, skyblue);
        }
        a:hover span:nth-child(3){
            right: 100%;
            transition: 1s;
            transition-delay: 0.5s;
        }
        a span:nth-child(4){
            bottom: -100%;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(36deg, transparent, skyblue);
        }
        a:hover span:nth-child(4){
            bottom: 100%;
            transition: 1s;
            transition-delay: 0.75s;
        }

CSS स्टाइलिंग:-

बटन को एक ग्रेडिएंट बैकग्राउंड दिया गया है और एक बॉर्डर दिया गया है, जो outset प्रभाव के साथ 3D लुक देता है। a:hover में एक होवर प्रभाव जोड़ा गया है, जो बटन के रंग, टेक्स्ट शैडो और एक चमकदार (glowing) प्रभाव को बदलता है। चार span एलिमेंट्स को एब्सोल्यूट पोजीशन में रखा गया है और होवर पर बटन के चारों ओर बॉर्डर एनीमेशन के लिए इनका उपयोग किया जाता है। होवर पर, span एलिमेंट्स स्क्रीन से बाहर से आकर बटन के चारों ओर एक बॉर्डर बनाते हैं, जिससे यह लगता है कि बॉर्डर धीरे-धीरे उभर रहा है।

बैकग्राउंड ग्रेडिएंट: बटन में एक ग्रेडिएंट बैकग्राउंड है और होवर पर इसका रंग बदलता है। बॉक्स शैडो: यह होवर पर चमकदार (glowing) प्रभाव उत्पन्न करता है। बॉर्डर एनीमेशन: प्रत्येक span एलिमेंट का एनीमेशन होवर पर अलग-अलग दिशा से शुरू होता है, जिससे ऐसा लगता है कि बॉर्डर को चारों ओर से खींचा जा रहा है।

यह बटन बहुत ही आकर्षक और इंटरैक्टिव बनता है, जो किसी भी वेबसाइट पर उपयोगकर्ता का ध्यान आकर्षित कर सकता है। अगर आप इसे संशोधित करना चाहते हैं या और कुछ बदलाव चाहते हैं, तो बताएं!

Online Tutorial

Search This Blog

button hover animation effects with html css

CSS BUTTON HOVER ANIMATION EFFECTS

HTML Code :-

HTML संरचना:

CSS Code :-

CSS स्टाइलिंग:-

वीडियो ट्यूटोरियल देखने के लिए नीचे दिए गए लिंक पर क्लिक करे ।

Watch Video Tutorial CLICK HARE .

Comments

Post a Comment