Let's Get in Touch With the following CSS app" /> Let's Get in Touch With the following CSS app" /> Let's Get in Touch With the following CSS app"/>

Want to move icon on hover from left to right with the background color

37 Views Asked by At

I am trying to accomplish the following:

    <button>
          <img src="./Banner-icons/paper-plane.svg" /> Let's Get in Touch
    </button>

With the following CSS applied

.banner button {
  background: transparent;
  width: 236px;
  border-radius: 0.5rem;
  padding: 10px 0px;
  border: 1px solid white;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(to right, #3b5999 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.9s ease-out;
}
.banner button: hover {
  background-position: left bottom;
}

The above CSS is working good for background color to move from left to right but I also want the icon to move with the background color from left to right using simple CSS.

I have a button in which I have an icon . I already done to move background color from left to right using linear gradient but I also want both of them (icon & background color) to move from left to right while hovering using simple CSS concepts

0

There are 0 best solutions below