[Support request] CSS: skewed buttons (parallelograms) without skewing text

[Jeremy]

Hi,

I’m using the “Service” theme from the Site Library, and I’d like to achieve this effect with the buttons:

https://codepen.io/dunyung1/pen/ZEGGWwB

I’ve tried many variations of the below code in the Customizer, which skews the buttons but also the text inside the button. I can’t figure out how to “un-skew” just the text, leaving the button skewed and the text normal, like the example above. Can you point me in the right direction? Maybe I need to add classes or divs in HTML, but which file do I open to write the HTML?

I’d like the text to be editable by the client in the blocks, so they don’t need to get into code; so I don’t want to use a custom HTML block for the buttons. I’d like to use CSS (and HTML or PHP or functions file if relevant) to modify the gb-buttons that would be edited in Gutenberg visual blocks.

Thank you for your help.

/* Button parallelograms */
.gb-button {
text-decoration: none;
display: inline-block;
transform: skewX(-8deg);
/* Un-skew the text */
}

.gb-button.gb-button-8f4b641d.gb-button-text > span {
display: inline-block;
transform: skewX(8deg);
}

.gb-button-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
clear: both;
}
/* End button parallelograms */

[Ying]

Hi there,

Can you link us to the page where we can see this button?

[Jeremy]

Hi Ying,

On this homepage:
https://service-demo.mysites.io/

You can see the buttons are skewed from the CSS code I put in the Customizer (similar code to above). Note that my code also skews the top of the pricing plan boxes (three “Service Headline” boxes and the “Learn More” text) probably due to the .gb-button CSS I added.

I would like to target only the button shapes on the page, so that the buttons are skewed as shown, but not any text – the text should remain normal, no skewing of text on buttons or elsewhere. I will customize the buttons further (colors, etc) using the normal GP visual editor, and button text should also be editable visually via Gutenberg/GP visual editor.

Thank you for your help.

[Fernando]

Hi Jeremy,

You can try to add my-skew to the class list of your Buttons, then add this CSS in Additional CSS:

.gb-button-wrapper.my-skew {
    transform:skew(-18deg);
}

.gb-button-wrapper.my-skew > * {
    transform:skew(18deg);
}

The skew won’t be visible though in the Editor. It will only be visible in the front end.

If you have GP Pro, you can set the skew there, but you’ll need CSS to reverse the skew of the text.

[Jeremy]

Thanks, Fernando! Where is the class list of buttons (is it a stylesheet in GP? Which one?)?

Using GP Pro, I added my-skew to the Additional CSS Classes (under Advanced, for the specific button block). And I added your code into the Customizer.

The button is skewed, but so is the text – the text isn’t getting “un-skewed”. Did I put something in the wrong place or miss something?

Thanks again.

[Fernando]

I see. I modified the code above.

Can you add the my-skew class to the Buttons Wrapper instead? So this: https://share.getcloudapp.com/d5unp4W8

[Jeremy]

I added the my-skew class to the Buttons Wrapper as you showed in your screenshot. And revised the Customizer CSS code to your revised code. Now the buttons are completely normal – no skew at all! 🙂 I think one CSS declaration is skewing it, and the other declaration is un-skewing it, but one is not targeting only the text in the <span> – they both target everything, maybe because the buttons or wrappers in GP are built that way.

I see what you’re getting at, I experimented with the CSS some more, but still no luck. Do you want admin access to my site to see and test? Any other ideas? This solution here:
https://codepen.io/dunyung1/pen/ZEGGWwB

…seems to define the class in the html, and I can do that if I knew which GP file (bundled with the Service theme: functions? ) produces those classes and buttons in HTML as DIVs like the codepen solution.

Thanks so much for working with me on this.

[David]

Hi there,

change the CSS you currently have on the site to this:

.gb-button-wrapper.my-skew .gb-button {
    transform: skew(-18deg);
}

.gb-button-wrapper.my-skew .gb-button span {
    transform: skew(18deg);
}

But this method will only work correctly if you have an Icon added to the button, as that gives us the additional span we need to make it work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeremy]

It does work! As you can see here:
https://service-demo.mysites.io/

Note that you still have to have “my-skew” in the Additional CSS class(es) of the buttons wrapper/block, as shown in Fernando’s screenshot.

I experimented with putting an icon in the PH text and removing part of the Icon SVG HTML in the block settings, leaving a blank space to the right inside the PH button. Now if only there were an “icon” in GP (or some other HTML SVG source to input in the Icon SVG HTML) to display a fake “blank space” in the additional span, or make the fake icon so small as to be virtually invisible. But this is good enough, and I salute your support team. I’ll look into fake blank spaces or trimming the button later.

Thanks, everyone, I’m off for the weekend and will return to work after. Cheers,
Jeremy

[David]

Glad to hear that, you can just set the Icon size to 0 – it won’t be visible or take up space – but it will do the trick.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts