编辑:我的网站可以在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{
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
(另外这里是另一个版本,文本将随着边框移动以及qazxsw poi)
如果您对如何使用:: after或:: before有任何疑问,请随时删除评论。如果您对CSS有基本的了解,那么代码应该相当简单。
如果你添加你的html和css会更好,这是我从你的问题中理解的东西。
https://codepen.io/Lumnezia/pen/KJYKad
.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);}