CSS多个类悬停在按钮效果上＆amp;过渡

发布于 2025-01-17 20:45:34 字数 785 浏览 0 评论 0原文

我有一个带有图标的按钮，我正在尝试实现悬停效果，我使悬停效果起作用，但仅当我将鼠标悬停在图标上而不是按钮的文本上时，它才起作用。

当我将光标移离图标时，悬停效果停止，但不平滑，效果立即停止。

希望有人可以帮助我：

填充上平滑的悬停停止动画
使图标在按钮文本悬停时增长。

平台：WordPress + Elementor

我的 CSS

.button-blue .fa-long-arrow-alt-right:before {
content: "\f30b";
background-color: #31A0F8;
color: #fff;
padding: 15px;
border-radius: 30px;
}

.button-blue, .fa-long-arrow-alt-right:hover:before {
padding: 20px;
border-radius: 30px;
transform: scale(1);
transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:hover:after {
transform: scale(1);
transition: 0.15s all ease;
}

原文

I have a button that has an icon and I'm trying to achieve a hover effect, I got the hover effect to work but it only works when I hover over the icon and not the text of the button.

When I move my cursor away from the icon the hover effect stops but it is not smooth, the effect stops instantly.

Hope someone can help me:

Smooth hover stop animation on the padding
Make icon grow on hover of button text.

Platform: WordPress + Elementor

My CSS

.button-blue .fa-long-arrow-alt-right:before {
content: "\f30b";
background-color: #31A0F8;
color: #fff;
padding: 15px;
border-radius: 30px;
}

.button-blue, .fa-long-arrow-alt-right:hover:before {
padding: 20px;
border-radius: 30px;
transform: scale(1);
transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:hover:after {
transform: scale(1);
transition: 0.15s all ease;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖 2025-01-24 20:45:34

尝试在没有的情况下将属性过渡添加到基本选手：Hover

.button-blue .fa-long-arrow-alt-right:before {
  content: "\f30b";
  background-color: #31A0F8;
  color: #fff;
  padding: 15px;
  border-radius: 30px;
  transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:after {
  transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:hover:before {
  padding: 20px;
  border-radius: 30px;
  transform: scale(1);
}

.button-blue, .fa-long-arrow-alt-right:hover:after {
  transform: scale(1);
}

Try to add the property transition to the base-selector without :hover

.button-blue .fa-long-arrow-alt-right:before {
  content: "\f30b";
  background-color: #31A0F8;
  color: #fff;
  padding: 15px;
  border-radius: 30px;
  transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:after {
  transition: 0.15s all ease;
}

.button-blue, .fa-long-arrow-alt-right:hover:before {
  padding: 20px;
  border-radius: 30px;
  transform: scale(1);
}

.button-blue, .fa-long-arrow-alt-right:hover:after {
  transform: scale(1);
}

回复收藏 0 原文

~没有更多了~