परफेक्ट सीएसएस स्प्राइट / स्लाइडिंग डोर बटन - सीएसएस-ट्रिक्स

यहाँ बड़े नोट! स्लाइडिंग दरवाजे एक बहुत पुरानी तकनीक है। यह वेब पर अपना समय था, लेकिन यह शायद इन दिनों जाने का सबसे अच्छा तरीका नहीं है। हमारे पास अब बॉर्डर-त्रिज्या और ग्रेडिएंट बैकग्राउंड है और वह सब, जो स्लाइडिंग डोर के दिन में हम जो हासिल करने की कोशिश कर रहे थे, उसे अनलॉक कर देते हैं।

लेकिन यह कैसे काम करता है यह दस्तावेज करने के लिए अभी भी मजेदार है, इसलिए यहां यह है:

 Sliding Doors Button

.button ( float: left; clear: both; background: url(RIGHT_SIDE.png.webp) top right no-repeat; margin: 5px; padding-right: 20px; color: white; text-decoration: none; ) .button span ( background: url(LEFT_SIDE.png.webp) top left no-repeat; line-height: 22px; padding: 7px 0 5px 18px; display: block; ) .button:hover ( background-position: right -34px; ) .button:hover span ( background-position: 0 -34px; color: #fff; )

कौन सा ग्राफिक्स इस तरह मानता है: