html - 如何在悬停时更改按钮的样式属性？

Question

编辑:我的网站可以在 http://caconline.ca/ 找到.

我目前正在使用 WordPress 上的 Elementor 改造学校俱乐部的网站。基本上，我想实现一种可以在网站上的按钮上找到的效果 http://www.fleshbeauty.com .当您将鼠标悬停在任何一个周围有黑色边框的按钮上时，您会看到一个浅粉色的阴影，它在悬停时被推了一点。我试图在我的学校俱乐部的网站上实现同样的效果，但相反 - 所以常规按钮已经有红色填充，当你将鼠标悬停在按钮上时，会出现一个边框，它从按钮。

目前我找到的解决方案之一是在自定义 CSS 中使用 ::before 选择器，但 Elementor 无法识别它。

到目前为止，这是我的代码的样子:

a.elementor-button-link.elementor-button.elementor-size-xl:hover {
z-index: -1;
border: 3px solid #000000;
margin: -10px -10px 10px 10px; }

再说一次，这就是我想要的结果，但相反:

Button found on Flesh Beauty

感谢任何帮助。谢谢!

Answer 1

我不确定我是否正确理解了您的意思。但我试图重新创造我认为你想要的东西。

button{
  background-color: #fdd;
  border: 0;
  position: relative;
  margin: 20px;
  padding: 10px;
}

button::after{
  content: ' ';
  position: absolute;
  display: static;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #000;
  transition: 200ms;
}

button:hover::after{
  top: 5px;
  left: 5px;
  opacity: 1;
}

https://codepen.io/Lumnezia/pen/wNZvaZ

( 还有另一个版本，文本也会随着边框移动 https://codepen.io/Lumnezia/pen/KJYKad )

如果您对如何使用::after 或::before 有任何疑问，请随时发表评论。如果您对 CSS 有基本的了解，代码应该相当简单。