Question

我正在尝试获取一个包含图像的按钮。我见过类似下面的东西，但它们没有给你一个普通按钮的按键按下/释放效果。

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

有没有办法获得按钮点击/释放效果，只是拍一下按钮内的图像？

Answer 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

Answer 2

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

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

html中的图像按钮

3 个答案: