The 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!
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0