HTML / CSS入力type =“ button”に画像アイコンを追加するには？

110

以下のCSSを使用していますが、ボタンの中央に画像が配置されます。を使用してアイコンを左または右に揃える方法はあります<input type="button">か？これにより、テキストと画像がうまくフィットして整列しますか？

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
html  css 
— ブレット
ソース

回答:

143

を絶対に使用する必要がある場合はinput、これを試してください：

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

通常button、img内部でaを使用する方が少し簡単です。

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

ただし、button送信用ののブラウザ実装は一貫してbuttonおらず、を使用するとすべてのボタンの値が送信されるため、マルチ送信フォームでの「クリックされたボタン」の検出が無効になります。

— デラン・アザバニ
ソース
必須ではありませんが、ここのボタンタグは、つまり6ではバグがあるか、一部のブラウザでは動作が異なりますか？
— ブレット
私が経験した限りでは、button（typeを使用したsubmit）inputは、要素にスタイルを適用するだけでなく、要素を許可することを除いて、と同じように機能します。
— Delan Azabani
8
IEの<button>実装の「バギー」な部分は、1）POST / GETで、クリックされたボタンだけでなく、すべてのボタンの「値」を送信すること、および2）実際のvalue属性を送信する代わりに、IEが好きであることに由来します。ボタンのコンテンツ（内部HTML）を送信します。<button>ユーザーがクリックしたボタンによって実行されるアクションが異なる場合、これらの事実によりタグの信頼性が低下します。
— 10
素晴らしい点、デュロス。はい、それは確かに「プレビュー」と「送信」がある編集投稿フォームなどのようなものにとってキッカーです
— Delan Azabani
3
あなたは使用することができる<button>と<input type=button>互換可能。：あなたがしたくない場合は、<ボタン> IEに提出し、そのようにそのタイプを設定<button type="button">Text</button>
— ダーシー
74

これは、ボタンイメージが16 x 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 */
}

ボタンの例：

ボタンの例

更新

Lessをたまたま使用した場合、このミックスインが役に立つかもしれません。

.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

— ショー
ソース
url（）メソッドの引数に引用符は必要ありませんか？
— ecbrodie
2
— sshow
10 
<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>

これがお役に立てば幸いです。

— フェルディヤンシア
ソース
2

スプライトシートを使用している場合、これは不可能になり、要素をラップする必要があります。

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

— ジェイクキャトラル
ソース
1

あなたはこのトリックを試すことができます！

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>

それはきれいではありませんが、仕事をします！

— 賛成
ソース
1

ここにボタン要素にアイコンを追加するだけです。

   <button class="social-signup facebook"> 
     <i class="fa fa-facebook-official"></i>  
      Sign up with Facebook</button>
— bilal
ソース
0

私がやることはこれを行うことです：

ボタンタイプを使用する

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

私はbackground-color：rgba（255,255,255,0.0）;を使用しました。ボタンの元の背景色が消えるように。border：noneも同じです。元のボーダーが削除されます。

— ジェームス111
ソース
0

これは必要な最小限のスタイルであり、画像をデフォルトのボタンサイズに合わせます。

<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">
スニペットを展開

「間隔を空けた」値は、必要な場合に備えて、ベースラインの整列を維持するために必要です...

— ジュゼッペ・コスタンツォ
ソース
0

sshowの答えも私のためにそれをしました：

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>

[...]

私はこれをFirefoxとChromeの最新バージョンで正常にテストしました（2019年2月9日現在）。

— mtjmohr
ソース
0

それはどのようなものか

これは私にとってはうまくいき、ホバーとクリックのCSSも処理しています（背景色を変更することで）：

HTML（ここでは2つの画像、image2の上に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;
}
— アンドリュー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.