XF 2.0 Trying to skew button, but keep text inside normal

[Matt C.]

I'm trying to skew the buttons, but keep the text inside normal.

I'm using this:

.button
{
    -webkit-transform: skew(-0.25rad);
    -ms-transform: skew(-0.25rad);
    transform: skew(-0.25rad);
    -webkit-transform: skew(-0.25rad) perspective(1px) translate3d(0, 0, 0);
    transform: skew(-0.25rad) perspective(1px) translate3d(0, 0, 0);
   
    .button-text
    {
        -webkit-transform: skew(0.25rad);
        -ms-transform: skew(0.25rad);
        transform: skew(0.25rad);
    }
}

This should work, but it isn't.



If anyone has any ideas, thank you.

Edit: You have to apply display: inline-block to the .button-text.

 

[hemant_bhardwaj]

CSS look fine for me and working fine -

.button
{
    -webkit-transform: skew(-0.25rad);
    -ms-transform: skew(-0.25rad);
    transform: skew(-0.25rad);
    -webkit-transform: skew(-0.25rad) perspective(1px) translate3d(0, 0, 0);
    transform: skew(-0.25rad) perspective(1px) translate3d(0, 0, 0);
    
}
    .button-text
    {
     -webkit-transform: skew(0.25rad);
        -ms-transform: skew(0.25rad);
        transform: skew(0.25rad);
}

 

[Matt C.]

CSS look fine for me and working fine -

Yes I saw that when I tried it on here, but wouldn't work on the default style on my board. I found that 2.1 has a display: inline-flex property on .button, which is why it worked. I'm on 2.0. I had to apply display: inline-block to .button-text for it to work.