Css button gradient background position [duplicate] - html

Question

This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 2 years ago.
I used a button with a background effect. However, I don't understand how the background-position works.
the background position is set to the right then when I mouse over the button the background move to the left. However, I can't figure out why the "blue" seems to come from the left to the right, it's like if the background move to the right.
Shouldn't the background move to the left?
button {
color: white;
background: linear-gradient(to left, red 50%, blue 50%);
background-size: 200%;
background-position: right bottom;
border: none;
border-radius: unset;
width: 85px;
height: 35px;
transition: 2s ease;
cursor: pointer;
}
button:hover {
background-position: left bottom;
}
<button>Button</button>
Fiddle Link

Answer 1

The logic is simple, let's start by each property.
First you defined the gradient like this linear-gradient(to left, red 50%, blue 50%) which means that starting from the left we will have 50% of red then the remaining blue (50% too)
div {
height:50px;
width:100px;
background-image:linear-gradient(to left, red 50%, blue 50%)
}
<div>
</div>
Now you specified the background-size to be 200% which means that you will scale the size of the background by 2. To illustrate check the below code to see the intial background and the scaled one:
div {
height:50px;
width:100px;
background-image:linear-gradient(to left, red 50%, blue 50%)
}
div:nth-child(2) {
height:100px;
width:200px;
margin-top:20px;
}
<div>
</div>
<div>
</div>
But a background should always fit into the size of the element and in this case you will only see 1/4 of it (since we did a scale on both direction). And the background-position will decide about this. When you set it to right bottom you make the right bottom corner of the background to match the right bottom corner of the element like below:
So you will intially see the yellow part. And if you specify left bottom you will have this:
So it's like the yellow box is sliding from right to left OR the yellow box is fixed and the background is moving from left to right (this the behavior you see since the yellow box here is your button) .
The main reason about this movement is the overflow, so to change its position the background should move in the opposite direction unlike if the background-size was less than 100%. And if the background size was 100% you will see no movement because both position are equivalent!
Here is a working example with the 3 different cases:
div {
height:50px;
width:100px;
background-image:linear-gradient(to left, red 50%, blue 50%);
border:1px solid;
background-position:right bottom;
background-repeat:no-repeat;
transition:1s;
}
.d1 {
background-size:50%;
}
.d2 {
background-size:100%;
}
.d3 {
background-size:200%;
}
body:hover div{
background-position:left bottom;
}
I will move from right to left
<div class="d1">
</div>
I will not move !
<div class="d2">
</div>
I will move from left to right
<div class="d3">
</div>

Answer 2

Remove the background-position from your button or change the order like backgrond-position:left bottom and apply the right instead of left in your gradient and hover position like below.
button
{
color:white;
background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200%;
border: none;
border-radius: unset;
width: 85px;
height: 35px;
transition: 2s ease;
cursor: pointer;
}
button:hover
{
background-position:right bottom;
}
Same I have added in the following snippet.
button
{
color:white;
background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200%;
border: none;
border-radius: unset;
width: 85px;
height: 35px;
transition: 2s ease;
cursor: pointer;
}
button:hover
{
background-position:right bottom;
}
<button>
Button
</button>