Kevin Powell - Community•13mo ago

Button Text Issue during animation

When I hover over to the button, the animation is good but the button text is not visible, how to solve? https://codepen.io/hamzacodepen951/pen/MWZNwdV

Hamza Naeem

CodePen

...

2 Replies

MarkBoots•13mo ago

it's because the before-element is on top of the div, you can change it by giving the ::before a z-index: -1 and the .btn itself isolation:isolate to make sure it doesn't go behind it. an other option is to use a background gradient for the effect (no need for a pseudo element

.btn-primary {
  background-color: var(--primary-color);
  background-image: linear-gradient(to right, var(--primary-color-dark) 50%, var(--primary-color) 0);
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position ease-in 0.3s;
}

.btn:hover{
  background-position: 0
}

.btn-primary {
  background-color: var(--primary-color);
  background-image: linear-gradient(to right, var(--primary-color-dark) 50%, var(--primary-color) 0);
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position ease-in 0.3s;
}

.btn:hover{
  background-position: 0
}

Hamza NaeemOP•13mo ago

thank you, first one seems for simple

Gaming

Programming

Button Text Issue during animation