এইচটিএমএল / সিএসএস ইনপুট টাইপ = "বোতাম" এ কীভাবে চিত্র আইকন যুক্ত করবেন?

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অভ্যন্তরীণ উপাদানগুলিকে অনুমতি দেওয়ার ব্যতীত (কেবল স্টাইলগুলি এতে প্রয়োগ করা হয়নি) ব্যতীত অভিন্নভাবে কাজ করে ।

— ডিলান আজাবানী

আইই এর <button>বাস্তবায়নের 'বগি' অংশটি এই ঘটনা থেকে আসে যে 1) একটি পোষ্ট / জিইটি-তে, এটি প্রতিটি বোতামের জন্য 'মানগুলি' জমা দেয় এবং কেবল ক্লিক করা একটি নয়, এবং 2) আসল valueবৈশিষ্ট্য প্রেরণের পরিবর্তে , আই.আই. পছন্দ করে বোতামের বিষয়বস্তু (অভ্যন্তরীণ এইচটিএমএল) প্রেরণ করতে। এই <button>পদক্ষেপগুলি ট্যাগটিকে অবিশ্বাস্য করে তোলে যদি নেওয়া পদক্ষেপটি কোনও ব্যবহারকারী ক্লিক করা বোতামের উপর নির্ভর করে।

— দুরোথ

দারোথ। হ্যাঁ, এটি অবশ্যই সম্পাদনা পোস্ট ফর্মের মতো জিনিসের জন্য "পূর্বরূপ" এবং "জমা দিন"

— ইত্যাদিগুলির পক্ষে খুব শক্তিশালী

আপনি <button>এবং <input type=button>বিনিময়যোগ্যভাবে ব্যবহার করতে পারেন । আপনি যদি <বাটন> আইইতে জমা দিতে না চান তবে এর ধরণটি সেট করুন:<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

ইউআরএল () পদ্ধতির যুক্তিতে আপনার কি উদ্ধৃতিগুলির দরকার নেই?

— ecbrodie

না, আমরা না। 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

শো এর উত্তর এটি আমার জন্যও করেছে:

নেভিগেশন.এসএস :

[...]

.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, 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

এটি আমার পক্ষে ভাল কাজ করে এবং আমি হোভার পরিচালনা করছি এবং সিএসএসও ক্লিক করব (পটভূমির রঙ পরিবর্তন করে):

এইচটিএমএল (এখানে 2 টি চিত্র দেখানো হচ্ছে, চিত্র 2 এর উপরে চিত্র 1):

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

সিএসএস (আমার চিত্রগুলি 32px এক্স 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

আপনার উত্তরের একটি ব্যাখ্যা যোগ করুন।

— warunapww

Img ট্যাগটি বন্ধ করতে একটি ">" প্রয়োজন।

— হ্যারিপুজলস

আপনি পিএইচপি ব্যবহার করছেন কেন?

— শীর্ষ বিড়াল