带有图像和居中文本的按钮，如示例答案

【问题标题】：button with image and centered text as in the example带有图像和居中文本的按钮，如示例
【发布时间】：2017-04-05 07:49:08
【问题描述】：

我想创建带有图像和居中文本的按钮，这里是一个图形示例： http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png

感谢您的帮助！

【问题讨论】：

标签： html css

【解决方案1】：

使用 background: url(yourimage.png) center center no-repeat transparent; 在带有 CSS 的按钮上设置背景图像。

Stackoverflow 上已经有回答的问题：

<input type="button"> 背景：How to add background image for input type="button"? <button>后台：<button> background image

.button{
        background: url(http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png) center center no-repeat transparent;
        cursor:pointer;
        border: none;
        padding: 100px;
        }

        <input type="button" name="button" value="Button" class="button"/>

【讨论】：

您好，感谢您的回复，但悬停效果和按钮的大小似乎很奇怪，尽管essenzialmenta.it/test-btn
编辑：减少填充，但仍然悬停问题非常感谢！
你好，只是悬停效果不起作用，它隐藏了img
你能用放大悬停效果替换它吗？如果是，您可以编辑 css 来做到这一点吗？
你想放大还是放大？

【解决方案2】：

你可以试试，

css

.button-image{
  height: 50px;
  width: 75px;
  background: url(your-image.jpg) center center no-repeat transparent;
  border: none;
  display: block;
}

html

<button class="button-image">Button Text</button>

您可以根据需要更改高度和宽度。

【讨论】：