将鼠标悬停在 Bootstrap 按钮图标上时显示半圆效果

Question

我一直在尝试让按我想要的方式设计的按钮悬停属性。 Google 无法帮助我。下面的图片展示了我正在努力实现的目标。

我在这里尝试过：https://jsfiddle.net/w32fxspr/4/ 但我最终得到了奇怪的结果。

i{
  padding-left: 20px;
}

a{
  margin: 20px;
  background-color: #007843 !important;
}

.custom i:hover{
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.59) !important;
  padding: 20px;
  position: absolute;
  margin-left: -20px;
  margin-top: -20px;
  transition: .1s ease;   
}

<!DOCTYPE html>
<html>
<head>
  <title>Button</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

</head>
<body>
    <a href="#" class="btn btn-primary custom">
      CONTACT US <i class="fa fa-angle-right"></i>
    </a>
</body>
</html>

Answer 1

您可以使用按钮的 :before 伪元素添加悬停效果，我们将在悬停时使用绝对定位将其放置在按钮上：

.custom {
  position: relative;
  overflow: hidden;
  border: none!important;
}

.custom:before {
  content: " ";
  display: block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.30) !important;
  position: absolute;
  right: -80px;
  top: -22px;
  transition: .1s ease;
}

.custom:hover:before {
  right: -45px;
}

/* Your existing CSS */
i { padding-left: 20px; }
a{ margin: 20px; background-color: #007843 !important; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<a href="#" class="btn btn-primary custom">
  CONTACT US <i class="fa fa-angle-right"></i>
</a>

这是如何工作的：

我们制作按钮 (.custom) position: relative; 这样我们就可以使用绝对位置在其上放置一个元素。我们还添加 overflow: hidden; 以仅在按钮内包含效果。
我们制作 .custom:before 一个包含 semi-transparent 圆的块元素，并使用绝对定位将其放置在我们想要的位置。
首先，我们使用 right: -80px; 将圆圈定位在按钮的最右侧，使其不可见。
然后在悬停按钮 .custom:hover:before 时，我们更改 right: -45px; 以显示圆圈。

将鼠标悬停在 Bootstrap 按钮图标上时显示半圆效果

Show semi-circle effect on hovering over Bootstrap button icon

html

css

button

hover

bootstrap-4