Pqteras Comments - Answer Overflow

Pqteras

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

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;
  }
}

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

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.

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

What?

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

Yeah but keeping the rounded corners

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

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.

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 7/17/2024 in #front-end

Button Background on hover won't fill all the way

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

30 replies

KPCKevin Powell - Community

•Created by Pqteras on 12/30/2022 in #front-end

My SVG hamburger menu is not showing up.

Yesss thank you so much, now its scaling as I want it to

7 replies

KPCKevin Powell - Community

•Created by Pqteras on 12/30/2022 in #front-end

My SVG hamburger menu is not showing up.

7 replies

Gaming

Programming