Custom css animation for a wix button

Ask the community
1

Hello !

I would like to know if it’s possible to give wix button (what I call wix btn is the ones you can drag & drop from the menu) a custom css animation.

I’ve tried to do it but the animation don’t play or only for the color of the text. Beside a custom css with a css button in a html element work fine

Here is in case the css I want to test :

.btn {
  color: purple;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.btn:hover {
  color: white;
}

.btn::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: purple;
  z-index: -1;
  transition: all 1s;
}

.btn:hover::before {
  width: 160%;
}

Thx for reading :slight_smile:

Pierre-François

2

I believe the issue here is caused by the before/after pseudoclasses. You should be able to do this without them by using the hover class and defining an SVG that’s the background you want on hover.

Not exactly the same but here’s a potential example I found of how to use SVGs for background: Set Fill Color of SVG Background-image - PQINA

3

I’m gonna try that thanks ! :slight_smile:

4

Well I tried all morning but I’m having a hard time with this ! I’ve made it work but it only play one time.

There is no way to made the ::before work in velo ?

Thx again