有自定义图像和链接的按钮

Question

我已经浏览了互联网，但这些答案都没有对我有任何帮助。我是一个初学者，想知道如何点击一下按钮（看起来像facebook徽标）链接到我的Facebook页面？我使用下面的代码无济于事。

 <input type="button" src="images/facebook.png" 
width="175" height="60" >
</section>
</header>

这是它不断向我展示的内容，我不知道为什么

Answer 1

使用css背景图像设置按钮的样式。

<input type="button" class="myclass" />

/*css*/
input.myclass { 
background-image: url('image.png'); 
background-repeat: no-repeat;  
background-position: 0px 0px; }

如果你想更好一点，可以将这个背景图像创建为精灵。所以你有按钮的高度，然后在悬停时改变背景位置，以显示悬停状态。

/*hover css*/
input.myclass:hover { background-position: 0px -25px; } 
/* where 25 is height of your btn */

Answer 2

替代方案可以是，您可以添加图像链接。

<a href="http://example.com"><img src="images/facebook.png" /></a>