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:

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!

  • Hello Ferwous - Welcome to the WordPress Development community! Unfortunately, questions regarding 3rd-party products are currently considered off-topic on this stack. The best course of action would be to pose the question in Elementor's official support channels or associated communities.
    – bosco
    Jun 16, 2021 at 22:05

1 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.

  • whatever you feel about what should and should not be accepted as a valid question, ranting is rarely a constructive thing to do. If you have an issue with site's policy you should raise them on meta Jun 17, 2021 at 6:40
  • @MarkKaplun I am actually very happy with site's policy, it's just than it is being widely misunderstood very often. Yes, this question essentially is off-topic on this stack - but I believe OP should have been redirected to StackOverflow, instead of 3rd party plugin's support channel. Jun 17, 2021 at 7:40
  • you are probably right Jun 17, 2021 at 8:51
  • Thank you much for your response. I'm sorry if I'm in the wrong thread/site. I just google wordpress questions. Anyways, the CSS code worked perfectly! Thanks again!!
    – Ferwous
    Jun 22, 2021 at 9:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.