CSS3 एनिमेटेड कस्टम चौड़ाई बटन

हमारा काम केवल HTML और CSS में एक सार्वभौमिक बटन बनाना था, जिसकी चौड़ाई में एक निश्चित आकार नहीं है, जो कि डिफ़ॉल्ट स्थिति में केवल एक आइकन प्रदर्शित करता है, और जब आप इसे चुनते हैं, तो इसके अंदर पाठ दिखाएगा।



ऐसा लगता है कि यहाँ यह है - एक स्पष्ट और सरल समाधान:

.button { transition: width ease-out 0.2s; width: 32px; } .button:hover { transition: width ease-out 0.2s; width: auto; } 

लेकिन इस मामले में सीएसएस संक्रमण काम नहीं करता है।

जब पहले वे मेरे पास आए और पूछा, "क्या सीएसएस 3 में ऐसा करना संभव है?", मैंने डिजाइनरों और प्रबंधकों को निराश किया, सीएसएस-संपत्ति में एक तरह के अपूर्ण संक्रमण की निंदा की।

और फिर भी यह पता चला कि एक खामी है, और यह अपमान करने के लिए सरल है।

width बजाय width आपको max-width चाहिए:

 .button { transition: width ease-out 0.2s; max-width: 32px; } .button:hover { transition: width ease-out 0.2s; max-width: 300px; } 

वही कहानी लागू होती है जब हमें height साथ "चारों ओर खेलने" की आवश्यकता होती है।

डेमो और स्रोत कोड वहाँ पाया जा सकता है, html और सीएसएस टैब में।

आपका ध्यान के लिए धन्यवाद!