Skewed / slanted button within elementor [closed]

Question

I got a request for a client regarding skewed/slanted buttons.
I only want the background of the button to be skewed and the text to be normal

Button normal:

Button hover:

Is this possible within Elementor?

I tried to following:
-Addons like happy addons (using the css transformation feature but it also skews the text)
-Custom html/css button (I'm not good with code at all so I want it to be as user friendly as possible)
-Column with hover image (can't seem to make it work + the work flow is bad)

Any help is highly appreciated! Thanks!

Answer 1

What you need is to select Elementor buttons and add a simple custom CSS. Basically what you need to do is to skew the button with the negative value, and then skew the inner text element with the positive value.

a.elementor-button {
  color: #fff;
  background: #000;
  border: 2px solid #000;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
  font-size: 0.8rem;
  padding: 14px 35px;
  display: inline-block;
  transform: skew(-35deg); /* Negative skew for the button */
}

a.elementor-button > .elementor-button-content-wrapper {
  display: inline-block;
  transform: skew(35deg); /* Positive skew for inner text */
}

You might be able to set majority of those rules with Elementor as well and use the custom CSS only for skewing. If you have some of those rules already set with Elementor and you need to override them with custom CSS, you might need to use !important or some higher priority selectors.