使用css或javascript在悬停时像充电电池一样的按钮

c3frrgcw 于 2023-05-30 发布在 Java

关注(0)|答案(2)|浏览(195)

我想实现一个像电池一样充满的按钮。它将首先以红色开始，然后在悬停时变为绿色。

我知道填充动画，但在填充时改变颜色，我无法实现。

.outer {
  margin: 50px;
}

.button {
  border: 1px solid black;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: green;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: red;
  transition: width 0.5s ease-out;
}

.button:hover::before {
  width: 100%;
}

.text {
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  color: black;
  transition: color 0.6s ease-out;
  display: block;
}

.button:hover .text {
  color: white;
}

<div class="outer">
  <button class="button">
    <span class="text">Click me</span>
    <span class="charging-animation"></span>
  </button>
</div>

css

来源：https://stackoverflow.com/questions/76310878/button-like-a-charging-battery-on-hover-using-css-or-javascript

2条答案

按热度按时间

uurity8g1#

body {
  background: #2b2626;
}
.button {
  width: 200px;
  height: 40px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #55eb63;
  box-sizing: content-box;
  background: transparent;
  margin: 30px;
  cursor: pointer;
}
.text {
  width: 200px;
  position: relative;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 40px;
  z-index: 2;
}
.button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 186px;
  left: 0;
  bottom: 0;
  border-radius: 7px;
  background-color: red;
  z-index: 1;
  transition: background-color 0.5s, right 0.5s;
}
.button:hover::before {
  right: 0px;
  background-color: #55eb63;
}

<div id="button" class="button" aria-role="button">
  <div class="text">BUTTON</div>
</div>

希望我的代码可以帮助你。它只是在背景颜色和宽度上使用了css过渡。

赞(0）回复(0）举报 2023-05-30

js81xvg62#

.button {background-color：} .button：：before {width：0%;背景色：绿色;}

赞(0）回复(0）举报 2023-05-30

我来回答

使用css或javascript在悬停时像充电电池一样的按钮

2条答案

相关问题

热门标签

最新问答