पारदर्शी HTML बटन कैसे बनाएं?

Question

मैं एक वेबसाइट बनाने के लिए dreamweaver का उपयोग कर रहा हूं और मैंने बस पृष्ठभूमि बनाने के लिए फ़ोटोशॉप का उपयोग करने के बारे में सोचा। मैंने ऐसा केवल इसलिए करने का फैसला किया क्योंकि अगर मैं कोड्स को एडिट करके बटन का नाम आसानी से बदलना चाहूंगा, तो मैं कोड का उल्लेख कर सकता हूं। अगर मैं फ़ोटोशॉप का उपयोग करके बटनों का निर्माण करूंगा, तो मैं उन बटनों में या किसी भी तत्व में आसानी से टेक्स्ट संपादित नहीं कर पाऊंगा।

तो मेरा सवाल सरल है, मैं एक बटन कैसे बनाऊं जिसमें एक सरल इनलाइन शैली हो जो इसे पारदर्शी बनाती है जिससे बटन का मूल्य अभी भी दिखाई दे रहा है।

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

आपके क्लिक करने के बाद भी यह बॉर्डर शेड छोड़ देता है।

Comments

एचटीएमएल सीएसएस अदृश्य बटन के

— लॉन्ग

Answer 1

क्लिक करने पर रूपरेखा से छुटकारा पाने के लिए, जोड़ें outline:none

jsFiddle उदाहरण

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button>button</button>

Comments

यह वास्तव में काफी अच्छा है। मैं पहले से ही छवि के तरीके की कोशिश कर चुका हूं और यह बिल्कुल वैसा ही है जैसा कि जरूरत है। बहुत बहुत धन्यवाद, श्रीमान हायस!

— शिनजी

यह -webkit-box-shadow: none; -moz-box-shadow: none;कोड में शामिल होने के बाद 100% काम करता है

— h3nr1ke

आप इसे बदलने का अनुकूलन कर सकते background-color: Transparent; background-repeat:no-repeat;करने के लिएbackground: Transparent no-repeat;

— फिलिपे एमराल

लापता outline: none;मुझे हर बार मिलता है

— एडम

Answer 2

समाधान वास्तव में बहुत आसान है:

<button style="border:1px solid black; background-color: transparent;">Test</button>

यह एक इनलाइन शैली कर रही है। आप बॉर्डर को 1px, ठोस लाइन और काले रंग में परिभाषित कर रहे हैं। पृष्ठभूमि का रंग फिर पारदर्शी पर सेट होता है।

---

अपडेट करें

आपके ACTUAL प्रश्न की तरह लगता है कि आप उस पर क्लिक करने के बाद सीमा को कैसे रोक सकते हैं। यह एक सीएसएस छद्म चयनकर्ता के साथ हल किया जा सकता है :active:।

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

JSFiddle डेमो

Comments

फिर भी आपने इसे क्लिक करने के बाद बॉर्डर शेड छोड़ दिया। आपके इनपुट के लिए धन्यवाद!

— शिनजी

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

— एनगर्मआरएम

यदि मेरा प्रश्न भ्रामक था, तो मुझे बहुत खेद है।

— शिनजी

Answer 3

एक div बनाओ और div की पृष्ठभूमि के रूप में अपनी छवि (पारदर्शी पृष्ठभूमि के साथ png) का उपयोग करें, फिर आप बटन के ऊपर मंडराने के लिए उस div के भीतर कोई भी पाठ लागू कर सकते हैं। कुछ इस तरह:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

सीएसएस:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}

Comments

यदि आप अपने html को शब्दार्थ और सुलभ रखना चाहते हैं, तो बटन टैग का उपयोग करना और पृष्ठभूमि आदि को हटाना सबसे अच्छा है। css का उपयोग करना। हालांकि, यह ठीक है, विशेष रूप से ऐसी स्थिति में जहां एक्सेसिबिलिटी मूल एप्लिकेशन की तरह एक मुद्दा नहीं है जो लेआउट के लिए html5 और CSS का उपयोग करता है, यहां एक उदाहरण है: smashingmagazine.com/2013/10/17/…

— एरिक बिशर्ड

Answer 4

<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}

Answer 5

अपनी पृष्ठभूमि छवि को सेट करने के लिए भी काम नहीं करता है:

button {
    background-image: none;
}

Answer 6

** इस तरह आइकन शीर्ष बटन जोड़ें **

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}

<button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>