css HTML Button problem in page builder(Beaver图片)

roqulrg3 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(144)

所以我有个问题我使用Beaver Builder创建我的页面。每当我使用html按钮与合并的css在它和悬停动画-每当我激活悬停默认按钮是可见的。我不知道怎么修救命！！！！
so this is the button and how it should look like when in hover mode:
and this is how it looks like:
你能帮我想个办法吗？

button {
  color: #2e276d;
  text-decoration: none;
  font-size: 20px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
button::before {
  margin-left: auto;
}
button::after,
button::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: 0.5s;
}
button:hover::after, button:hover::before {
  width: 100%;
}

<button>
  HOVER ME
</button>

css

来源：https://stackoverflow.com/questions/76578407/html-button-problem-in-page-builder-beaver-bilder

1条答案

按热度按时间

k5ifujac1#

这可能是你在CSS中针对同一个按钮，也是在CSS代码中的其他地方或通过Beaver构建器本身针对的。
如果需要，您可以将!important添加到CSS规则中。但我不推荐这样做，除非真的需要，因为这会覆盖代码中其他地方应用的所有其他CSS规则。
下面是一个例子，我如何使用颜色红色与!important，后来试图改变它与不同的颜色，* 这不工作 *。

button {
  color: red !important; // this will always be applied
}
button {
  color: #2e276d; // This will not be applied, because of the !imporant above
  text-decoration: none;
  font-size: 20px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
button::before {
  margin-left: auto;
}
button::after,
button::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  transition: 0.5s;
}
button:hover::after, button:hover::before {
  width: 100%;
}

<button>
  HOVER ME
</button>

我建议在使用之前检查一下你的代码，看看应用的默认规则是从哪里来的（如果可能的话，修改一下）！CSS中重要规则。
我建议为您要定位的按钮使用特定的类，并将CSS应用于该类，而不是定位按钮本身，以避免全局覆盖CSS规则。
更多信息：!important rule CSS

展开查看全部

赞(0）回复(0）举报 2023-07-01

我来回答

css HTML Button problem in page builder(Beaver图片)

1条答案

相关问题

热门标签

最新问答