html - 在我的基本站点中实现自定义按钮 https://cssbuttoncreator.com/ 的问题

Question

我一直在尝试添加您在此站点中创建的自定义按钮，但没有成功。我已确保我的类在 html 中与已提供的 css 中的代码相同，但没有任何反应。我尝试删除所有不同的 webkit 并逐行构建。奇怪的是，当我可以让它工作时，它基本上会创建我想要的按钮，但盒子的一部分在不同的行上。

.button {
  background: #11CDD4;
  background-image: -webkit-linear-gradient(top, #11CDD4, #11999E);
  background-image: -moz-linear-gradient(top, #11CDD4, #11999E);
  background-image: -ms-linear-gradient(top, #11CDD4, #11999E);
  background-image: -o-linear-gradient(top, #11CDD4, #11999E);
  background-image: linear-gradient(to bottom, #11CDD4, #11999E);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 40px;
  font-weight: 100;
  padding: 40px;
  box-shadow: 1px 1px 20px 0px #000000;
  -webkit-box-shadow: 1px 1px 20px 0px #000000;
  -moz-box-shadow: 1px 1px 20px 0px #000000;
  text-shadow: 1px 1px 20px #000000;
  border: solid #337FED 1px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}

.button:hover {
  border: solid #337FED 1px;
  background: #30ECDB;
  background-image: -webkit-linear-gradient(top, #30ECDB, #2BC4AD);
  background-image: -moz-linear-gradient(top, #30ECDB, #2BC4AD);
  background-image: -ms-linear-gradient(top, #30ECDB, #2BC4AD);
  background-image: -o-linear-gradient(top, #30ECDB, #2BC4AD);
  background-image: linear-gradient(to bottom, #30ECDB, #2BC4AD);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  text-decoration: none;
}

<div class="contact-me">
  <h2>Get In Touch</h2>
  <h3>If you are interested in collaborating on a project</h3>
  <p class="contact-me-skill"> To be updated.</p>
  <a class="button" href="mailto:[e-mail]">Contact Me</button>
      </div>
    </div>

标签： htmlcssbutton

Answer 1

我建立了 cssbuttoncreator.com。感谢您使用我的应用程序。

您的问题如下：

1. 您没有结束标签，而是放置了结束标签。
2. 当代码中只有一个 div 时，会有一个额外的结束标签。