HTML / CSS Wie füge ich ein Bildsymbol zum Eingabetyp = "Schaltfläche" hinzu?

Ich verwende das folgende CSS, aber es platziert ein Bild in der Mitte der Schaltfläche. Gibt es eine Möglichkeit, ein Symbol mit nach links oder rechts auszurichten <input type="button">, damit der Text und das Bild gut zusammenpassen und ausgerichtet werden?

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

Wenn Sie unbedingt verwenden müssen input, versuchen Sie Folgendes:

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

Es ist normalerweise etwas einfacher, ein buttonmit einem imgInneren zu verwenden:

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

Die Browser-Implementierungen buttonfür das Senden sind jedoch inkonsistent, ebenso wie die Tatsache, dass alle Schaltflächenwerte gesendet werden, wenn sie buttonverwendet werden. Dies beendet die Erkennung "Welche Schaltfläche hat geklickt" in einem Formular mit mehreren Übermittlungen.

Dies sollte tun, was Sie wollen, vorausgesetzt, Ihr Schaltflächenbild ist 16 x 16 Pixel groß.

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

Beispielschaltfläche:

Aktualisieren

Wenn Sie Less verwenden, kann dieses Mixin nützlich sein.

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

Das obige kompiliert in

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>

Ich hoffe das hilft dir.

Wenn Sie Spritesheets verwenden, wird dies unmöglich und das Element muss umbrochen werden.

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

Schauen Sie sich diese Geige an: http://jsfiddle.net/AJNnZ/

Sie können diesen Trick versuchen!

1.) mach das:

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

2.) Style es!

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

Es ist nicht sauber, aber es wird den Job machen!

Fügen Sie einfach das Symbol im Schaltflächenelement hinzu. Hier ist das Beispiel

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

Sie können versuchen, ein Bild in die Schaltfläche http://jsfiddle.net/s5GVh/1415/ einzufügen.

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

Was ich tun würde, ist dies zu tun:

Verwenden Sie einen Schaltflächentyp

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

Ich habe Hintergrundfarbe verwendet: rgba (255,255,255,0,0); Damit verschwindet die ursprüngliche Hintergrundfarbe einer Schaltfläche. Das gleiche gilt für die Grenze: keine; es wird die ursprüngliche Grenze wegnehmen.

Dies ist der minimal erforderliche Stil, der das Bild an die Standardgröße der Schaltflächen anpasst:

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

Der Wert "Abstand" wird benötigt, um die Ausrichtung der Grundlinie beizubehalten, nur für den Fall, dass Sie ihn benötigen ...

Die Antwort von sshow hat es auch für mich getan:

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>

[...]

Ich habe dies erfolgreich unter den neuesten Versionen von Firefox und Chrome getestet (Stand 9. Februar 2019).

Dies funktioniert gut für mich und ich gehe auch mit Hover und Click CSS um (durch Ändern der Hintergrundfarbe):

HTML (hier 2 Bilder, Bild1 über Bild2):

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

CSS (meine Bilder sind 32px x 32px groß, daher habe ich ihnen 4px zum Auffüllen und eine 5px-Randrundung gegeben):

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