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