इस वीडियो के समय सीएसएस-ट्रिक्स पर बटन, एक अशुद्ध 3 डी प्रभाव है। वे एक नीली ईंट की तरह दिखते हैं जो आप ऊपर से एक कोण पर देख रहे हैं। जब आप उन पर नीचे दबाते हैं, तो उनकी सक्रिय स्थिति ट्रिगर होती है (जैसे सभी लिंक / बटन / इनपुट) और CSS उन्हें नीचे और दाईं ओर ले जाता है, ऐसा प्रतीत होता है जैसे आप सचमुच ईंट को सतह में थोड़ा दबा रहे हैं।
समस्या क्या है? जब आप उस तरह एक तत्व को स्थानांतरित करते हैं (इस मामले में, रूपांतरित करें translate(3px, 3px);
) : आप उस क्षेत्र को बदल रहे हैं जिसमें वह प्रेस "क्लिक" डोम इवेंट को ट्रिगर करेगा। यदि उस प्रेस का स्थान उस क्षेत्र में होता है जो उस "क्लिक करने योग्य" क्षेत्र से बाहर हो जाता है, तो यह ट्रिगर नहीं होगा। तो बटन दबाया हुआ दिखता है, लेकिन वास्तव में कभी भी दबाया नहीं जाता है। यह अजीब और बुरा और अप्रत्याशित व्यवहार है।
हालांकि यह प्रभाव अभी भी ठंडा है, इसलिए इस वीडियो में हम इसे पीछे छोड़े गए स्थान को भरने के लिए एक छद्म तत्व को स्थानांतरित करके इसे ठीक करते हैं, जिससे "क्लिक करने योग्य" क्षेत्र हमेशा समान रहता है।
डेमो पेन देखें।