HTML / CSS इनपुट प्रकार = "बटन" में छवि आइकन कैसे जोड़ें?

Question

मैं नीचे सीएसएस का उपयोग कर रहा हूं, लेकिन यह बटन के केंद्र में एक छवि डालता है। बाएं या दाएं किसी भी तरह से आइकन का उपयोग करके संरेखित करें <input type="button">, ताकि पाठ और छवि फिट हो और अच्छी तरह से संरेखित हो?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

Answer 1

यदि आप पूरी तरह से उपयोग करना चाहते हैं input, तो यह प्रयास करें:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

यह आमतौर पर एक अंदर के buttonसाथ उपयोग करने के लिए थोड़ा आसान है img:

<button type="submit"><img> Text</button>

हालाँकि, buttonसबमिट करने के लिए ब्राउज़र कार्यान्वयन असंगत हैं, साथ ही साथ यह भी बताया गया है कि उपयोग किए जाने पर सभी बटन मान भेजे जाते हैं button- जो बहु-सबमिट फ़ॉर्म में "किस बटन पर क्लिक किया गया" का पता लगाता है।

Comments

करने के लिए नहीं है, लेकिन मैं यहाँ बटन टैग 6 में छोटी गाड़ी है या कुछ ब्राउज़रों में अलग तरह से व्यवहार करता है?

— ब्रेट

जहां तक ​​मैंने अनुभव किया है, button(प्रकार के साथ submit) अनौपचारिक रूप से काम करता है inputकि अंदर तत्वों को अनुमति देने के अपवाद के बजाय (केवल उस पर लागू शैलियों के बजाय)।

— डेलन अजाबानी

IE के <button>कार्यान्वयन का 'छोटी गाड़ी' भाग इस तथ्य से आता है कि 1) POST / GET पर, यह हर बटन के लिए 'मान' जमा करता है, और न कि केवल एक क्लिक किया है, और 2) वास्तविक valueविशेषता भेजने के बजाय , IE पसंद करता है। बटन की सामग्री (आंतरिक HTML) भेजने के लिए। <button>यदि उपयोगकर्ता द्वारा क्लिक किए गए बटन पर निर्भर करता है तो ये तथ्य अविश्वसनीय नहीं होते हैं।

— डुरथ

ग्रेट पॉइंट, डुरोथ। हां, यह निश्चित रूप से एक संपादित पोस्ट फॉर्म जैसी चीजों के लिए एक किकर है, जिसमें "पूर्वावलोकन" और "सबमिट करें", आदि हैं

— डेलन अजाबनी

आप उपयोग कर सकते हैं <button>और <input type=button>परस्पर विनिमय कर सकते हैं । यदि आप <बटन> IE में सबमिट नहीं करना चाहते हैं, तो इसके प्रकार को इस तरह सेट करें:<button type="button">Text</button>

— डार्सी

Answer 2

यह वही करना चाहिए जो आप चाहते हैं, आपकी बटन छवि 16 से 16 पिक्सेल है।

<input type="button" value="Add a new row" class="button-add" />

input.button-add {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

उदाहरण बटन:

अपडेट करें

यदि आप कम उपयोग करते हैं, तो यह मिश्रण काम में आ सकता है।

.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
    height: @icon-size * 2;
    padding-left: @icon-size + @icon-inset * 2;
    padding-right: @icon-inset;
    border: 1px solid @border-color;
    background: @background-color url(@icon-url) no-repeat @icon-inset center;
    cursor: pointer;
}

input.button-add {
    .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}

उपरोक्त में संकलित

input.button-add {
  height: 32px;
  padding-left: 36px;
  padding-right: 10px;
  border: 1px solid #000000;
  background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
  cursor: pointer;
}

JSFiddle

Comments

क्या आपको url () विधि के तर्क में उद्धरण की आवश्यकता नहीं है?

— इकोबॉडी

नहीं, हम नहीं। stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— sshow

Answer 3

<button type="submit" style="background-color:transparent; border-color:transparent;"> 
  <img src="images/button/masuk.png" height="35"/>
</button>
<button type="reset" style="background-color:transparent; border-color:transparent;"> 
  <img src="images/button/reset.png" height="35"/>
</button>

मैं आशान्वित हूं कि इससे आपको सहायता मिलेगी।

Answer 4

यदि आप स्प्राइटशीट का उपयोग कर रहे हैं तो यह असंभव हो जाता है और तत्व को लपेटा जाना चाहिए।

.btn{
    display: inline-block;
    background: blue;
    position: relative;
    border-radius: 5px;
}
.input, .btn:after{
    color: #fff;
}
.btn:after{
    position: absolute;
    content: '@';
    right: 0;
    width: 1.3em;
    height: 1em;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

इस फिडेल को देखें: http://jsfiddle.net/AJNnZ/

Answer 5

आप इस ट्रिक को आजमा सकते हैं!

1) ऐसा करें:

<label for="img">
   <input type="submit" name="submit" id="img" value="img-btn">
   <img src="yourimage.jpg" id="img">
</label>

2) यह शैली!

<style type="text/css">
   img:hover {
       cursor: pointer;
   }
   input[type=submit] {
       display: none;
   }
</style>

यह साफ नहीं है, लेकिन यह काम करेगा!

Answer 6

बस बटन तत्व में आइकन जोड़ें यहाँ उदाहरण है

   <button class="social-signup facebook"> 
     <i class="fa fa-facebook-official"></i>  
      Sign up with Facebook</button>

Answer 7

आप बटन के अंदर छवि डालने की कोशिश कर सकते हैं http://jsfiddle.net/s5GVh/1415/

<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>

Answer 8

मैं यह करूँगा क्या:

एक बटन प्रकार का उपयोग करें

 <button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>

मैंने पृष्ठभूमि-रंग का उपयोग किया: rgba (255,255,255,0.0); ताकि एक बटन का मूल पृष्ठभूमि रंग चला जाए। सीमा के साथ भी: कोई नहीं; यह मूल सीमा को दूर ले जाएगा।

Answer 9

यह आवश्यक न्यूनतम शैली है, छवि को डिफ़ॉल्ट बटन आकार में फिट करना:

<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">

बेसलाइन अलाइनमेंट रखने के लिए "स्पेसेड" वैल्यू की जरूरत होती है, बस जरूरत पड़ने पर ...

Answer 10

sshow के जवाब ने मेरे लिए भी किया:

नैविगेशन :

[...]

.buttonConfiguration {
    width: 40px;
    background-color: red; /* transparent; */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: corbel;
    font-size: 12px;
    font-weight: normal;
    margin: 1px 1px;
    cursor: pointer;

    background-image: url('../images/icons5/gear_16.png');
    background-position: center; /* 0px 0px; */
    background-repeat: no-repeat;
    vertical-align: middle;
}

[...]

फ्रेममेनु.php :

[... PHP, Javascript and HTML code ...]

<!-- <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonSuperAdmin" value="<?= $oLanguage->getExpression('confSettings', 'title', 'C e n t e r s') ?>"></a> -->
<li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonConfiguration" value=""></a>
<ul>
<li><a target="frameBody" href="admin/conf/getglobals.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('centerSettings', 'confAdmin1', 'GetGlobals') ?>"></a></li>
<li><a target="frameBody" href="admin/conf/getcwd.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('confSettings', 'centerAdmin2', 'GetCWD') ?>"></a></li>
</ul>
</li>

[...]

मैंने फ़ायरफ़ॉक्स और क्रोम के अंतिम संस्करणों (9 फरवरी, 2019 तक) के तहत इसका सफलतापूर्वक परीक्षण किया है।

Answer 11

यह मेरे लिए अच्छी तरह से काम करता है, और मैं मंडराना संभाल रहा हूं और सीएसएस पर क्लिक करें (पृष्ठभूमि का रंग बदलकर):

HTML (यहाँ 2 चित्र दिखा रहा है, image1 के शीर्ष पर image1):

<button class="iconButton" style="background-image: url('image1.png'), url('image2.png')"
  onclick="alert('clicked');"></button>

CSS (मेरी छवियां 32px X 32px हैं, इसलिए मैंने उन्हें पैडिंग के लिए 4px और 5px सीमा गोलाई दी):

.iconButton {
    width: 36px;
    height: 36px;
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

.iconButton:hover {
    background-color: #303030;
}

.iconButton:active {
    background-color: #606060;
}

button::-moz-focus-inner {
    border: 0;
}

Answer 12

<img src="http://www.pic4ever.com/images/2mpe5id.gif">
            <button class="btn btn-<?php echo $settings["button_background"]; ?>" type="submit"><?php echo $settings["submit_button_text"]; ?></button>

Comments

कृपया अपने उत्तर में एक स्पष्टीकरण जोड़ें।

— वरुणपाव

Img टैग को बंद करने के लिए ">" की आवश्यकता है।

— १

आप PHP का उपयोग क्यों कर रहे हैं?

— टॉप कैट