मुझे पूरी तरह से खींचो या "सबमिट" और "बटन" कैसे खींचें

अक्सर कोडर्स को "डिजाइनर आकर्षण" से निपटना पड़ता है। "सबमिट" और "बटन" जैसे बटन कोई अपवाद नहीं हैं। PSD लेआउट के अनुसार लेआउट को पूरा करना आवश्यक है, और ट्रैफ़िक और क्रॉस-ब्राउज़र पृष्ठ की अत्यधिक खपत के बारे में नहीं भूलना चाहिए।

समस्याएँ आम तौर पर तब शुरू होती हैं जब बटन में गोल कोने, पेचीदा बॉर्डर और ग्रेडिएंट होते हैं जैसा कि ऊपर चित्र में है।
आज मैं इस समस्या को हल करने में अपने व्यक्तिगत अनुभव को साझा करना चाहूंगा।


और इसलिए समाधान के लिए आगे बढ़ें:

इस समाधान का विकल्प IE में 9 वें संस्करण (सीएसएस 3 के बिना) के नीचे सही प्रदर्शन की अनिवार्य आवश्यकता के कारण है।

1. बटन को 3 भागों में विभाजित करें: बाईं पट्टिका, केंद्र पट्टी 1px चौड़ी और दाईं पट्टिका:

2. एक "div" बनाएं जिसमें बटन स्थित होगा और अपनी स्थिति निर्धारित करेगा: रिश्तेदार;
3. इसके बाद, "div" टैग के परिणामस्वरूप "शव" और केंद्र में हम रंग "पारदर्शी" के साथ पाठ लिखते हैं (यह आवश्यक है ताकि बटन आवश्यक चौड़ाई तक फैला हो);
.button .left_part {
width: 21px;
height: 44px;
background-image: url(../images/left_part_button.png);
float: left;
}
.button .centr_part {
height: 44px;
background-image: url(../images/centr_part_button.png);
float: left;
font-size: 24px;
line-height: 41px;
color: transparent;
position: relative;
z-index: 0;
}
.button .right_part {
width: 21px;
height: 44px;
float: left;
background-image: url(../images/right_part_button.png);

4. अगला कदम "सबमिट" खुद जोड़ना है, इसे 1px की चौड़ाई के साथ "div" में लपेटें, इसे चौड़ाई सेट करें: 100% और स्थिति: निरपेक्ष, इसे फ़ॉन्ट रंग के अनुसार स्टाइल करें, आदि। बटन के 3 भागों के सामने परिणामी जगह।

ऐसा लगता है कि सब कुछ के रूप में यह काम करना चाहिए, लेकिन जब एक IE दिग्गज खेल में प्रवेश करता है, एक समस्या दिखाई देती है,

IE रंग को नहीं समझता है: पारदर्शी। पाठ जो "सबमिट" और केंद्रीय "div" में पूरी तरह से ओवरलैप नहीं करता है। मैंने बटन की पृष्ठभूमि के समान एक रंग उठाया, मेरी स्थिति में यह काफी सरल था।

परिणामस्वरूप, हमें उदाहरण के रूप में एक क्रॉस-ब्राउज़र अनुगामी बटन "सबमिट" मिलता है।

स्रोत कोड
डेमो

युपीडी। इस पद्धति को चुनने का एक कारण जोड़ा गया।