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有基本的了解，则代码应该相当简单。

Answer 2

如果您添加html和CSS会更好，这是我从您的问题中了解的内容。

.button{padding:10px 35px; display:inline-block; background:none; border:1px solid #000; margin:30px; position:relative; color:#000; text-decoration:none; }
.button:before{background:pink; width:100%; height:100%; top:0; left:0; transform:translate(0px, 0px); content:''; position:absolute; z-index:-1; opacity:0; transition: all ease-in-out .5s;}
.button:hover:before{opacity:1;transform:translate(-10px, -10px);}

<a class="button" href="#">Explore</a>

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

2 个答案: