Kevin Powell - Community•6mo 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•6mo ago

maybe make a codepen or show with a video

PqterasOP•6mo ago

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

glutonium•6mo ago

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

PqterasOP•6mo 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.

PqterasOP•6mo ago

Here I zoomed it further

glutonium•6mo ago

is this wut u want?

PqterasOP•6mo ago

Yeah but keeping the rounded corners

glutonium•6mo ago

only sharp edge when animated otherwise rounded that?

PqterasOP•6mo ago

What?

glutonium•6mo ago

is this wut u want?

PqterasOP•6mo 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•6mo 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

PqterasOP•6mo 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;
  }
}

MarkBoots•6mo ago

late to the party, but with @property now supported by all browsers, you can do it in a single element (no pseudo) with a transitioning background gradient https://codepen.io/MarkBoots/pen/eYwJPNp?editors=1100

Gaming

Programming

Button Background on hover won't fill all the way