CSS Animating Button Background - how to make this background move horizontally not vertically

user3914769
March 27, 2024
193 views
0 votes
2 Answers

I have a button with an animated hover effect where the background slides together and then when the mouse leaves it splits vertically and moves to the top/bottom. I cant figure out how to get it so that when the mouse leaves the background just reverses and the 2 halves go back to the sides instead of the top and bottom?

Here’s the CSS that’s driving it:

.bannerbuttonV1 {
  --cblack: #282828; /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack); 
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, background-position 0s .4s, color .4s;
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
  transition: background-position .4s, background-size 0s;
}

<div class='bannerbuttonV1'>
    shop now
</div>

Here’s an example of it:

https://codepen.io/Mark-Edlington/pen/JjVWVWB

I found this code online and have adapted it a little, if anyone knows a better way to achieve this then I’m all ears. I’m sure I only need to use 2 background lines rather then 4 but it was setup initially so that the 4 quarters of the background moved away to the 4 corners.

Thanks

Answers

(Original Answer) I edited your code, and removed the vertical animation:

.bannerbuttonV1 {
  --cblack: #282828; /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack); 
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 0%,
    var(--_g) calc(var(--_p,0%) - 100%) 100%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
  outline-offset: .1em;
  transition: background-size .4s, 
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
  transition: background-position .4s, background-size 0s;
}

<div class='bannerbutton bannerbuttonV1'>
    shop now
</div>

You need to remove the line "background-position 0s .4s, color .4s;",
Should work fine now. EDIT: I added a comma to the line "transition: background-size .4s". Without it, that corner issue you talked about arises.

Remove two middle gradients from the background.
Set background-size to 50%.
Change transition to contain only background-position .4s and color .4s.
Remove transition property from :hovered rule.

.bannerbuttonV1 {
  --cblack: #282828; /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack); 
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: 
    var(--_g) calc(var(--_p,0%) - 100%) 0%,
    var(--_g) calc(200% - var(--_p,0%)) 100%;
  background-size: 50%;
  outline-offset: .1em;
  transition: background-position .4s, color .4s;
} 
.bannerbuttonV1:hover {
  --_p: 100%;
  color:#fff;
}

Snippet:

.bannerbuttonV1 {
  --cblack: #282828;
  /* the color*/
  --_p: 0%;
  box-shadow: 0 0 0 .1em inset var(--cblack);
  --_g: linear-gradient(var(--cblack) 0 0) no-repeat;
  background: var(--_g) calc(var(--_p, 0%) - 100%) 0%, var(--_g) calc(200% - var(--_p, 0%)) 100%;
  background-size: 50%;
  outline-offset: .1em;
  transition: background-position .4s, color .4s;
}

.bannerbuttonV1:hover {
  --_p: 100%;
  color: #fff;
}

.bannerbutton:active {
  box-shadow: 0 0 9e9q inset #0009;
  background-color: #282828;
  color: #282828;
}

.bannerbutton {
  font-family: arial;
  font-size: 18px;
  cursor: pointer;
  padding: 16px 25px;
  font-weight: bold;
  border: none;
  height: 52px;
  color: #282828;
  background-color: #444;
  width: 150px;
  text-align: center;
  border-radius: 2px
}

<div class='bannerbutton bannerbuttonV1'>
  shop now
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

CSS Animating Button Background – how to make this background move horizontally not vertically

Answers