सीएसएस आंतरिक सीमा?

Question

मैंने सीएसएस के साथ पूरी तरह से बाईं ओर बटन बनाया। यह एक div के भीतर एक div है। हालांकि, दाएं तीन बटन backgroundimg टैग पर गुण हैं। मैंने ऐसा किया ताकि मैं here से निर्देशों के बाद रोलओवर प्रभाव अनुकरण कर सकूं।

अब, वहाँ सीएसएस का उपयोग कर, आंतरिक बॉर्डर जोड़ने के लिए पहला बटन के रूप में, अन्य तीन के लिए एक रास्ता है?

फिडल here।

Answer 1

होना चाहिए (प्रतीक।), गद्दी सामग्री और के बीच है सीमा।

.img-btn { 
    background: #FFF; // inner border color 
    padding: 2px; // inner border width 
    border: 2px solid #[yourgreen]; // outer border 
} 

तुम भी अपने शुद्ध सीएसएस बटन के लिए यह पूरा करने के लिए, किसी भी अतिरिक्त div रों आवश्यकता नहीं होनी चाहिए: आप की तरह छवियों शैली में सक्षम होना चाहिए।

.img-btn { 
    background: #FFF url('your.img') no-repeat; 
    padding: 2px; 
    border: 2px solid #[yourgreen]; 
    width: [image width]; 
    height: [image height]; 
    background-position: center center; 
} 

यहाँ डबल-सीमा का एक DEMO जैसा कि ऊपर वर्णित है: शैली के बाद जब छवि एक पृष्ठभूमि छवि है मामले के लिए है।

Answer 2

बटन के लिए किए गए समान दृष्टिकोण का उपयोग करें - बस आइकनों को आंतरिक छवियों के रूप में पृष्ठभूमि छवियों के रूप में देखें। तो तुम box model के अनुसार एक सफेद सीमा के साथ कुछ गद्दी, एक आंतरिक div (अपने मामले img में) के साथ एक div, और एक पृष्ठभूमि छवि

Answer 3

मान लीजिए कि आप सीधे आइकन छवियों को संशोधित नहीं कर सकते हैं, बस उन्हें "कार्ट में जोड़ें" जैसे ही एक div में लपेटें। तुम भी या तो

background-position: center center; 

सुनिश्चित करना है कि आइकन छोटे img भीतर केंद्रित रहता है, और/या

background-size: 24px 24px; 

थोड़ा नीचे पृष्ठभूमि पैमाने पर करने के इतना सफेद सीमा नहीं करता है 'का उपयोग करना होगा प्रतीकों में भाग नहीं है।

Answer 4

आपको बटन करने के लिए दो <divs> और <a> की आवश्यकता नहीं है। आप इसे एक <a> के साथ कर सकते हैं। बाहरी सीमाओं को करने के लिए आप छवियों और बटन दोनों के लिए box-shadow का उपयोग कर सकते हैं। <img> तत्वों में background-images केंद्र करें।

डेमो: http://jsfiddle.net/ThinkingStiff/bNmzB/

आउटपुट:

HTML:

<a id="add" href="#">Add To Cart</a> 
<img id="facebook" class="icon" /> 
<img id="twitter" class="icon" /> 
<img id="email" class="icon" /> 

सीएसएस:

#add { 
    background-color: #9bc9c7; 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px #9bc9c7; 
    color: white; 
    display: inline-block; 
    font: normal 13px/25px Helvetica, Arial, Sans Serif; 
    height: 25px; 
    margin-right: 6px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 120px; 
    vertical-align: top; 
} 

#add:hover { 
    background-color: #eabeb2; 
    box-shadow: 0 0 0 2px #eabeb2; 
} 

.icon { 
    background-color: rgb(155, 201, 199); 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px rgb(155, 201, 199); 
    height: 25px; 
    margin-right: 3px; 
    width: 25px;  
}