问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为什么这个 CSS 按钮不是“可点击的”？

社区维基
1
新手上路，请多包涵

所以我在 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 外观，有时什么也没有发生。有人可以告诉我如何创建自己的自定义按钮吗？我将不胜感激任何帮助。

原文由 adiush 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssfrontend
阅读 277
2 个回答
得票最新
社区维基
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>

原文由 Studio KonKon 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您不应在按钮元素中使用 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>

你可以在 这里 找到所有的 html 元素教程

原文由 Isa Ataseven 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题