html中的图片按钮答案

【问题标题】：Image button in htmlhtml中的图片按钮
【发布时间】：2014-12-26 03:33:37
【问题描述】：

我正在尝试获取一个带有图像的按钮。我见过类似下面的东西，但它们并没有像普通按钮那样为您提供按钮按下/释放效果。

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />

有没有办法获得按钮点击/释放效果，但只需在按钮内拍一张图片？

【问题讨论】：

标签： html

【解决方案1】：

是的，通过将background-image 应用于button，如下所示：

HTML

<button>Click Me</button>

CSS

button{
  background-image: url("YourImageHere");
  color: #FFF; //random values
  height: 50px; //random values
  width: 100px; //random values   
}

FIDDLE

【讨论】：

【解决方案2】：

.yourButton{
    background:url("logg.png") no-repeat;
    border:none;
    cursor:pointer;
    width:40px;
    height:10px;
}

【讨论】：

【解决方案3】：

如果你想用输入按钮来做，你可以试试这个代码：

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />

你的 css 将如下所示：

#saveform {
    outline: none; //To remove the blue outline ( the blue line ) when the focus event occurs
}
#saveform:active {
    transform: scale(0.9,0.9);
}

但是如果你不想尝试使用输入标签，你可以使用这个代码：

Html:

<button id="saveform"  type="submit" value="Submit">Submit</button>

CSS:

#saveform{
  background-image: url("SourceOfYourImage");
  height: 50px; // Any value
  width: 100px; //  Any value
}

【讨论】：