CSS में रोलओवर 1 के साथ बटन का उदाहरण

रोलओवर 1 सीएसएस
इस उदाहरण के लिए हमारे पास 3 छवियां होनी चाहिए जो इस प्रकार काम करेंगी;
विश्राम

के ऊपर

पकड़ कर रखा

फिर हमारी साइट के मुख्य भाग में हमारे पास यह है
कोड:


शुरुआत

और इसलिए हमारे सभी बटनों के लिए, हमें CSS का उपयोग करने के बाद, हम इस कोड से शुरू करते हैं:
कोड:

# बॉट1 {
सीमा: 0 0 0 0;
पैडिंग: 0;
पाठ-संरेखण: केंद्र;
}
जहां हम कहते हैं कि हम बाहरी और आंतरिक मार्जिन नहीं चाहते हैं, हम पाठ को केंद्र में संरेखित करते हैं, अब हम इस कोड के साथ जारी रखते हैं:
कोड:

# bot1 से {
पृष्ठभूमि-छवि: यूआरएल (bg_menu_1.jpg);
पृष्ठभूमि-स्थिति: केंद्र शीर्ष;
ऊंचाई: 30 पीएक्स;
चौड़ाई: 100 पीएक्स;
प्रदर्शन क्षेत्र;
रंग: # 990000;
पाठ-सजावट: कोई नहीं;
पैडिंग-टॉप: 5px;
बैकग्राउंड-रिपीट: नो-रिपीट;
फोंट की मोटाई: बोल्ड;
}
कि वह व्यावहारिक रूप से वही है जो सब कुछ करता है, आइए देखते हैं लाइन दर लाइन
पृष्ठभूमि-छवि: यूआरएल (bg_menu_1.jpg);
इसके साथ हम कहते हैं कि हमें बैकग्राउंड इमेज चाहिए और हम इसका रास्ता देते हैं
पृष्ठभूमि-स्थिति: केंद्र शीर्ष;
इससे हम संकेत दे रहे हैं कि बैकग्राउंड इमेज की पोजीशन बीच में और ऊपर की तरफ होगी।

बैकग्राउंड-रिपीट: नो-रिपीट;
ताकि पृष्ठभूमि इस तरह न दोहराए जैसे कि वह एक पैटर्न हो।
ऊंचाई: 30 पीएक्स;
चौड़ाई: 100;
हम उसे बताते हैं कि ऊंचाई 30 और चौड़ाई 100px होगी जो कि हमारी पृष्ठभूमि छवियों के आयाम हैं।
प्रदर्शन क्षेत्र;
ताकि यह हमारे द्वारा पहले किए गए उपायों के साथ एक बॉक्स उत्पन्न करे और उसका सम्मान करे।
रंग: # 990000
इससे हम केवल उस टेक्स्ट को कलर दे रहे हैं जो हमारे बॉक्स के अंदर है।
पाठ-सजावट: कोई नहीं;
यह उस रेखा से बचने के लिए है जो कड़ियों के नीचे है।
पैडिंग-टॉप: 5px;
ताकि मैं अपने लिंक के उपरी हिस्से में 5px का स्पेस सेव कर लूं और इसके साथ ही यह हमारे बॉक्स के सेंटर की पोजीशन को कम कर देता है।
फोंट की मोटाई: बोल्ड;
अक्षरों को बोल्ड बनाता है
फिर आपको छद्म तत्वों "होवर" और "फोकस" के लिए कक्षाएं जोड़नी होंगी
कोड:

# bot1 a: होवर {
पृष्ठभूमि-छवि: यूआरएल (bg_menu_2.jpg);
}
# bot1 से: फोकस {
पृष्ठभूमि-छवि: यूआरएल (bg_menu_3.jpg);
}
लेकिन जैसा कि हम महसूस करते हैं, हमने केवल उस प्रभाव को प्राप्त करने के लिए अपनी पृष्ठभूमि छवियों का मार्ग बदल दिया, जिसकी हम तलाश कर रहे थे।
हमारे का कोड css. में रोलओवर उदाहरण नीचे दिखाया गया है:
कोड:








शुरुआत


और छवियों को इस पृष्ठ से डाउनलोड किया जा सकता है, छवि पर राइट क्लिक करके और इस रूप में सहेजा जा सकता है।