HTML / CSS Làm cách nào để thêm biểu tượng hình ảnh vào input type = “button”?

Tôi đang sử dụng CSS bên dưới, nhưng nó đặt một hình ảnh ở giữa nút. Có cách nào để căn trái hoặc phải một biểu tượng bằng cách sử dụng <input type="button">để văn bản và hình ảnh vừa vặn và căn chỉnh đẹp không?

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

Nếu bạn nhất thiết phải sử dụng input, hãy thử điều này:

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

Thường dễ dàng hơn một chút khi sử dụng a buttonvới imgbên trong:

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

Tuy nhiên, việc triển khai trình duyệt của buttonđể gửi không nhất quán, cũng như thực tế là tất cả các giá trị nút được gửi khi buttonđược sử dụng - điều này sẽ giết chết tính năng phát hiện "nút nào được nhấp" trong biểu mẫu gửi nhiều lần.

Điều này sẽ làm những gì bạn muốn, giả sử hình ảnh nút của bạn là 16 x 16 pixel.

<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 */
}

Nút ví dụ:

Cập nhật

Nếu bạn tình cờ sử dụng Ít, hỗn hợp này có thể hữu ích.

.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);
}

Phần trên biên dịch thành

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

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

Tôi hy vọng cái này sẽ giúp bạn.

Nếu bạn đang sử dụng spritesheets, điều này trở nên không thể và phần tử phải được bao bọc.

.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;
}

Kiểm tra trò chơi này: http://jsfiddle.net/AJNnZ/

bạn có thể thử thủ thuật này!

Thứ nhất) làm điều này:

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

Thứ 2) phong cách nó!

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

Nó không sạch nhưng nó sẽ thực hiện công việc!

Chỉ cần thêm biểu tượng vào phần tử nút đây là ví dụ

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

bạn có thể thử chèn hình ảnh bên trong nút http://jsfiddle.net/s5GVh/1415/

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

Những gì tôi sẽ làm là làm điều này:

Sử dụng một loại nút

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

Tôi đã sử dụng background-color: rgba (255,255,255,0.0); Sao cho màu nền ban đầu của nút biến mất. Tương tự với đường viền: không có; nó sẽ lấy đi đường viền ban đầu.

Đây là kiểu tối thiểu cần thiết, vừa vặn hình ảnh với kích thước nút mặc định:

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

giá trị "khoảng cách" là cần thiết để giữ căn chỉnh đường cơ sở, đề phòng trường hợp bạn cần ...

câu trả lời của sshow cũng làm được điều đó cho tôi:

navigation.css :

[...]

.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;
}

[...]

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

[...]

Tôi đã thử nghiệm điều này thành công trong các phiên bản mới nhất của Firefox và Chrome (kể từ ngày 9 tháng 2 năm 2019).

Điều này hoạt động tốt đối với tôi và tôi cũng đang xử lý di chuột và nhấp vào CSS (bằng cách thay đổi màu nền):

HTML (ở đây hiển thị 2 hình ảnh, image1 trên đầu image2):

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

CSS (hình ảnh của tôi có kích thước 32px X 32px, vì vậy tôi đã cho chúng 4px để đệm và làm tròn đường viền 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;
}

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