需要帮助启动此按钮并使用 CSS 和 HTML

Question

--努力弄清楚为什么按钮没有出现在我的网站上-- --当我的鼠标悬停在它上面时，我正在尝试获得一个动画按钮来更改动画 -- 我会担心在不同的时间将按钮链接到某个东西，但我的意思是，例如，如果我想将它链接到 twitter 或其他东西我该怎么做呢？--

button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border:none;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: transparent;
  color: #000;
  transition: all 200ms ease-in-out;
}

button :hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

button :active {
  transform: scale(1);
}

<button>Example</button>

Answer 1

css 选择器不能有空格，所以

button :hover //wrong
button:hover // right

button {
  min-width: 120px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: .1px;
  outline: none;
  border:none;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #f7f7f7;
  background-color: transparent;
  color: #000;
  transition: all 200ms ease-in-out;
  margin: 0 5px;
}

button:hover {
  transform: scale(1.1);
  background-color: #f7f7f7;
  color: #a22274;
  font-weight: bold;
  box-shadow: 0 0 0 2px #a22274;
  letter-spacing: 1.1px;
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

button:active {
  transform: scale(1);
}

<p align="center">
    <button><a href="twitter.com/TheOnlyDecipher">Twitter page</a></button> <button><a href="Contact.html">Contact Information</a></button> <button><a href="points.html">Points of Interest</a></button>
    <button><a href="Learning.html">Learning notes</a></button> <button><a href="Beebs.html">Notes for Wife</a></button> <br />
    <br />
</p>