Question 174014 in CSS Question posted in
Some basic documentation can be found here.

button like a charging battery on hover using css or javascript

I want to achieve a button that fills up like a battery. It will start with color red first then change to green on hover.

enter image description here

I know the fill up animation but the changing colors while filling up I cant achieve.

.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>
Tags:

2

Answers


  1. 0

    .button {background-color: red;} .button::before {width: 0%; background-color: green;}

    Login or Signup to reply.
  2. 0 
    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>

    Hope my code can help you. It just used css transition on both background color and width.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search