Kevin Powell - Community•2mo ago

Button Background on hover won't fill all the way

I have a button that when hovered it fills the background diagonally but for some reason it keeps the corners not filled. What do I need to change so it fills it all the way? Here is my code for the button

.meetTeam {
  box-sizing: border-box;
  margin-top: 1.5rem;
  border: 2px solid $primary-color;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: bold;
  transition: 0.3s;
  z-index: 1;
  color: $primary-color;
  border-radius: 0.3rem;

  &::before {
    content: "";
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: $primary-color;
    transition: 0.5s ease;
    display: block;
    z-index: -1;
  }

  &:hover::before {
    width: 120%;
  }

  &:hover {
    color: white;
  }
}

.meetTeam {
  box-sizing: border-box;
  margin-top: 1.5rem;
  border: 2px solid $primary-color;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: bold;
  transition: 0.3s;
  z-index: 1;
  color: $primary-color;
  border-radius: 0.3rem;

  &::before {
    content: "";
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: $primary-color;
    transition: 0.5s ease;
    display: block;
    z-index: -1;
  }

  &:hover::before {
    width: 120%;
  }

  &:hover {
    color: white;
  }
}

16 Replies

glutonium•2mo ago

maybe make a codepen or show with a video

Pqteras•2mo ago

My issue is not the animation, but filling up the corners. But alright here you go: https://codepen.io/Pqteras/pen/dyBGVbV

glutonium•2mo ago

u want the corners to be sharp when bg fills? it's round now since u gave border-radius

Pqteras•2mo ago

I want when its hovered, to not show the white background on the corners. Idk how to explain it further but when you hover over the button you can see on the corners the white color, which I do not want.

Pqteras•2mo ago

Here I zoomed it further

glutonium•2mo ago

is this wut u want?

Pqteras•2mo ago

Yeah but keeping the rounded corners

glutonium•2mo ago

only sharp edge when animated otherwise rounded that?

Pqteras•2mo ago

What?

glutonium•2mo ago

is this wut u want?

Pqteras•2mo ago

I want the button to still have rounded corners, hovered or not. The issue is that when hovered the button has a few white spots on its corners, making it not appealing to the eye. I want that gone.

glutonium•2mo ago

I don't see any while spots ooh now i see i have lowesy brightness + extra dim on xD ok i found 1 solution for u make it so that once the width of the ::before is 120%, meaning tbe transition is done, it shoild set the bg color of the button .meetTeam to --primary-color this way the bg color covers the white gap but again, make sure u make so it sets the bg color only after transition of ::before is done otherwise you would be able to see the bg of the button changing BEFORE the ::before fills the button, which i assume u don't want to show the user and i have tried it, it works m not showing u cause it's simple instruction. u should be able to do it yourself

Pqteras•2mo ago

I fixed it with this code for anyone who is wondering

.meetTeam {
  box-sizing: border-box;
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: bold;
  transition: 0.3s;
  color: $primary-color;
  border-radius: 0.3rem;
  padding: 2px;
  z-index: 1;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    border: 2px solid $primary-color;
    position: absolute;
    top: 0;
    left: 0;
  }
  &::before {
    content: "";
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: $primary-color;
    transition: 0.5s ease;
    display: block;
    z-index: -1;
  }

  &:hover::before {
    width: 120%;
  }

  &:hover {
    color: white;
  }
}

.meetTeam {
  box-sizing: border-box;
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: bold;
  transition: 0.3s;
  color: $primary-color;
  border-radius: 0.3rem;
  padding: 2px;
  z-index: 1;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
    border: 2px solid $primary-color;
    position: absolute;
    top: 0;
    left: 0;
  }
  &::before {
    content: "";
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: $primary-color;
    transition: 0.5s ease;
    display: block;
    z-index: -1;
  }

  &:hover::before {
    width: 120%;
  }

  &:hover {
    color: white;
  }
}

Gaming

Programming

Button Background on hover won't fill all the way