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

Question

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

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

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

Answer 1

对此的替代方法是，您可以添加指向图像的链接。

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

Answer 2

使用 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 */