如何创建带有图像和文本的主页按钮(html, css)

Question

我想要做的就是能够创建这个 main page button。我想在一个按钮中将图像和文本并排放置，当单击该按钮时，它会 link 我到主页。（稍后我会给它一个

为了观察我的代码的作用，我扩展了 div 和按钮的尺寸。通常，我的按钮是w:100px、h:30px，div是w:1000px、h:30px。看起来像 this

我是 css & html 以及 asp.net 的新手。请帮忙，谢谢。

我的代码：

<div style="width:800px; height:1000px; margin-left:auto; margin-right: auto; background-color:#D9FFFF">
    <button style="width:725px; height:427px; background-size: 5%; background:url('pics/home.png') no-repeat 1px 1px; padding:0; margin:0;">Home Page</button>
</div>

Answer 1

正如我在评论中所说，它不是 button，而是 anchor。掌握基本的 HTML 和 CSS 知识应该不会太难。您可能遇到的困难是主页图标。最简单的方法是使用 font-awesome 库，将其添加到 head 元素：<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

并将其作为 innerHTML 添加到锚点：<a href=""><i class="fas iconname"></i> TEXT</a>

a {
  text-decoration: none;
  color: black;
  background-color: lightgrey;
  display: inline-flex;
  padding: 5px;
  width: 100px;
  height: 30px;
  font-size: 14.5px;
  justify-content: space-between;
  align-items: center;
  
}

a > i {
  color: grey;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

<a href="#"><i class="fas fa-home"></i> MAIN PAGE</a>

如何创建带有图像和文本的主页按钮(html, css)

how to create home page button with image and text(html, css)

html

css

stretching