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!
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
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