如何添加图像图标输入类型 = “按钮”？

我正在使用下面的 CSS，但是它把一个图像放在按钮的中心。任何方法左或右对齐图标使用 <input type="button">，使文本和图像适合和对齐良好？

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
725595 次浏览
小开
最佳答案

如果你一定要使用 input，试试这个:

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

通常使用内部有 img的 button会更容易一些:

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

然而，用于提交的 button的浏览器实现是不一致的，而且当使用 button时，所有按钮值都会被发送出去——这就消除了在多次提交表单中“点击了什么按钮”的检测。

小开

假设你的按钮图像是16x16像素，这应该可以做你想做的事情。

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

Example button:

example button

更新

如果您碰巧使用 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

小开

如果您使用的是电子表格，那么这是不可能的，因此必须对元素进行包装。

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

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

我希望这能帮到你。

小开

我会这么做:

使用按钮类型

 <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) ; 这样按钮的原始背景色就消失了。边界也是一样: 没有; 它将带走原来的边界。

小开

你可以试试这招！

第一步:

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

它不干净，但它会做的工作！

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

只需在按钮元素中添加图标即可

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

您可以尝试插入图像内按钮 Http://jsfiddle.net/s5gvh/1415/

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

这是所需的最小样式，适合图像的默认按钮大小:

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

the "spaced" value is needed to keep baseline alignment, just in case you need it...

小开

Sshow 的回答对我也有帮助:

导航 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日)。

小开

What it looks like

这对我来说很有用，我也可以处理悬停和点击 CSS (通过改变背景颜色) :

HTML (这里显示2个图像，图像2上的图像1) :

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

提交答案