Question

因此，我在html中创建了一个按钮，然后在CSS中对其进行了样式设置，但它无法正常工作，我无法单击它。

button.blue {
  background-color: #00FFF0;
  border-radius: 12px;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  opacity: 0.6;
}

<button class="blue" href="www.google.com">Get The App</button>

我尝试了许多不同的组合，有时按钮只是获得默认的html外观，有时没有任何反应。有人可以指出我如何创建自己的自定义按钮吗？我将不胜感激任何帮助。

Answer 1

button元素不能使用href属性。改用A（锚点）元素，然后将其样式设置为看起来像按钮一样。

当用户将鼠标悬停或单击按钮时，请使用:hover :active pasuados更改样式。

.btn-blue {
  background-color: #00FFF0;
  border-radius: 12px;
  border: 1px transparent solid; /* transparent border */
  color: black;
  padding: 13px 30px; /* remove 2px as we are now using the border */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  opacity: 0.6;
  cursor: pointer;
}

.btn-blue:hover
{
  opacity: 1;
  background-color: #00EEE0;
  border: 1px #99ccff solid;
}

.btn-blue:active
{
  background-color: #00CCC0;
  border: 1px #000000 solid;
}

<a class="btn-blue" href="#">Get The App</a>

现在只需将上面的一些代码替换为所需的样式即可。

更新：

如果您需要固定高度的按钮，请检查以下代码：

.btn-blue {
  background-color: #00FFF0;
  border-radius: 12px;
  
  /* add a transparent border or use #00FFF0 for color */
  border: 1px transparent solid;
  
  /* Allows us to include the padding and border in an element's total width and height. */
  box-sizing: border-box;
  
  color: black;
  
  /* remove the top and bottom padding, we don't need them */
  padding: 0px 30px;
  
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  
  font-family: Helvetica, Arial;
  
  /* Use this to set a fixed height so the height won't changes */
  height: 35px;
  
  /* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
  line-height: 35px;
  
  /* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
  min-width: 150px;
  
  opacity: 0.6;
  cursor: pointer;
}

.btn-blue:hover
{
  font-size: 14px;
  font-weight: bold;
  opacity: 1;
  background-color: #00EEE0;
  border: 1px #99ccff solid;
}

.btn-blue:active
{
  background-color: #00CCC0;
  border: 1px #000000 solid;
}

<a class="btn-blue" href="#">Get The App</a>

Answer 2

按钮没有href属性。您可以使用 <a href="#" > Click Me </a> 元素。（如果您引用任何页面或链接）或者您可以使用 <button onClick="anyFunction"> Cick me </button> 具有事件处理程序的按钮，需要一个函数。

Answer 3

使用它并使用css使其看起来像按钮，因为按钮没有href属性。

<a href="#" class="blue">Get The App</a>

Answer 4

您不应在按钮元素中使用href。您可以像这样使用onclick。

<html lang="en">
<head>
 <style type="text/css">
  button.blue {
        background-color: #00FFF0;
        border-radius: 12px;
        border: none;
        color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        opacity: 0.6;  
      }
</style>
</head>
<body>
   <button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>

您可以在here

中找到所有html元素教程。

Answer 5

边界：无；造成问题

请尝试为边框添加颜色

例如

<button class="blue">Get The App</button>

<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;  }
</style>

为什么此CSS按钮不可“点击”？

5 个答案: