छद्म तत्वों का उपयोग कर सीएसएस बटन

नमस्कार दोस्तों। पिछले महीने में, मैंने छद्म तत्वों के साथ प्रयोग किया, विशेष रूप से बटन बनाने में उनके उपयोग के साथ। इस प्रकार, शांत प्रभाव पैदा करना संभव था जो पहले केवल स्प्राइट्स के साथ किया जा सकता था।

इस ट्यूटोरियल में, मैं आपको दिखाता हूँ कि केवल एंकर टैग और CSS की शक्ति का उपयोग करके एक मोड़ के साथ एक बटन कैसे बनाया जाए।



फ़ॉन्ट स्टीव मैटसन द्वारा "ओपन संस" है।

त्याग

मैं इन उदाहरणों में CSS उपसर्गों का उपयोग नहीं करूंगा, लेकिन आप उन्हें स्रोत फ़ाइलों में पाएंगे।

मैंने संक्रमण गुण का उपयोग नहीं किया, क्योंकि केवल फ़ायरफ़ॉक्स छद्म तत्वों में इसका समर्थन करता है। इसके अलावा, मेरा मानना ​​है कि बटन इसका इस्तेमाल किए बिना अच्छे से काम करते हैं।

अंकन

सभी बटनों के संचालन के लिए, केवल एक लंगर उपयोगी है, हम छद्म वर्ग :: का उपयोग करते हुए पहले अन्य सभी तत्वों का निर्माण करेंगे।

<a href="#" class="a_demo_one"> Click me! </a> 

पहला उदाहरण

मुझे लगता है कि सादे सीएसएस के साथ यह सबसे आसान उदाहरण है।

शैलियों

सबसे पहले, हम सामान्य और सक्रिय स्थिति में बटन के लिए मूल शैलियों को निर्धारित करेंगे। ध्यान दें कि बटन अपेक्षाकृत तैनात है। यह स्थिति में मदद करेगा जब :: तत्व से पहले ::

 .a_demo_one { background-color:#ba2323; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; border: solid 1px #831212; background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%); border-radius: 5px; } .a_demo_one:active { padding-bottom:9px; padding-left:10px; padding-right:10px; padding-top:11px; top:1px; background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%); } 

अब छद्म तत्व से पहले :: :: का उपयोग करके बटन के चारों ओर एक ग्रे कंटेनर बनाएं। पूर्ण स्थिति हमारे जीवन को आसान बना देगी जब तत्व खुद को स्थिति देगा।

 .a_demo_one::before { background-color:#ccd0d5; content:""; display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; border-radius: 5px; box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; } 

दूसरा उदाहरण

यह उदाहरण 3 डी प्रभाव के कारण थोड़ा अधिक जटिल है। प्रारंभ में, बटन कंटेनर के बाहर स्थित होता है, फिर, जब क्लिक किया जाता है, तो यह नीचे जाता है:

 .a_demo_two { background-color:#6fba26; padding:10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%); box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d; border-radius: 5px; } .a_demo_two:active { top:7px; background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%); box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d; color: #156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background: rgb(44,160,202); } 

शैलियों

लेकिन यहाँ यह अधिक जटिल है:

चूँकि छद्म तत्व की स्थिति मूल तत्व पर निर्भर करती है, मूल तत्व को कई पिक्सेल ले जाने पर, छद्म तत्व को समान संख्या में पिक्सेल द्वारा स्थानांतरित किया जाना चाहिए, लेकिन विपरीत दिशा में।

 .a_demo_two::before { background-color:#072239; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; border-radius: 6px; box-shadow: 0px 1px 0px #fff; } .a_demo_two:active::before { top:-2px; } 

तीसरा उदाहरण

यह मेरे पसंदीदा बटन में से एक है, क्योंकि इसे बनाने से पहले मैं एक नहीं था। ऐसा लगता है कि लोग वास्तव में उसे पसंद करते हैं। बटन को दो भागों में विभाजित किया गया है, और जब आप इस पर क्लिक करते हैं, तो यह "टूटता" है।

शैलियों

फिर से, आसान भाग से शुरू करते हैं। ध्यान दें कि इंडेंटेशन यहाँ दिखाई दिया है। यदि आपको बटन को केंद्र में रखने की आवश्यकता है, तो छद्म तत्व की चौड़ाई की भरपाई करना आवश्यक है। यदि यह आवश्यक नहीं है, तो इंडेंटेशन छोड़ा जा सकता है।

 .a_demo_three { background-color:#3bb3e0; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; border-left:solid 1px #2ab7ec; margin-left:35px; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; } .a_demo_three:active { top:3px; background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; } 

चलिए छद्म तत्वों की ओर बढ़ते हैं:

 .a_demo_three::before { content:"·"; width:35px; max-height:29px; height:100%; position:absolute; display:block; padding-top:8px; top:0px; left:-36px; font-size:16px; font-weight:bold; color:#8fd1ea; text-shadow:1px 1px 0px #07526e; border-right:solid 1px #07526e; background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ; } .a_demo_three:active::before { top:-3px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ; } 

चौथा उदाहरण

इस बार हम पृष्ठभूमि छवि का उपयोग करके तीर के लिए छद्म तत्व का उपयोग करेंगे। छवियों के बजाय, आप इन फ़ॉन्ट आइकन का भी उपयोग कर सकते हैं।

शैलियों

 .a_demo_four { background-color:#4b3f39; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; padding-right:50px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999; } .a_demo_four:active { top:3px; background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%); box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999; } .a_demo_four::before { background-color:#322620; background-image:url(../images/right_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; } .a_demo_four:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; } 

पाँचवाँ उदाहरण

यह उदाहरण बहुत अच्छा नहीं है, लेकिन आप इसे अपनी इच्छानुसार संशोधित कर सकते हैं।

शैलियों

 .a_demo_five { background-color:#9827d3; width:150px; display:inline-block; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; margin-top:40px; padding-bottom:10px; padding-top:10px; background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999; } .a_demo_five:active { top:3px; background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%); box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999; } .a_demo_five::before { background-color:#fff; background-image:url(../images/heart.gif); background-repeat:no-repeat; background-position:center center; border-left:solid 1px #CCC; border-top:solid 1px #CCC; border-right:solid 1px #CCC; content:""; width:148px; height:40px; position:absolute; top:-30px; left:0px; margin-top:-11px; z-index:-1; border-top-left-radius: 5px; border-top-right-radius: 5px; } .a_demo_five:active::before { top: -33px; box-shadow: 0px 3px 0px #ccc; } 

निष्कर्ष में

खैर, यह सब है। यह मत भूलो कि इन बटनों का निर्माण एक प्रयोग है, इसलिए हर ब्राउज़र उन्हें सही ढंग से प्रदर्शित नहीं करेगा।

इस ट्यूटोरियल को पढ़ने के लिए धन्यवाद, मुझे आशा है कि आप इसे उपयोगी पाएंगे।

प्रदर्शन | स्रोत कोड