how to remove the italic behaviour of font. If the button is TILT?

Question

I have a problem that if i skew the button to -15deg. Its tilt like itlaic font style but when the button tilt the text inside the button also got tilt(italic).

I want to know that how is it possible that if the button is tilt(italic) then the text should be in normal font style.

now its showing like this . I want button should be like this but text shouldn't be like this it should be normal.

i follow this answer but this is not working for me. font style should be normal

Is there any problem in my code below:

HTML:

<input id="btn" type="submit" value="BUTTON IS THIS">

CSS:

#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
font-style:normal;
}

I'd suggest using `` instead; since you can then wrap the text inside with another tag and style that tag to give it a skew opposite of the one applied to the button itself; so it will look how you want — IvanS95, Mar 28 '19 at 17:56
Possible duplicate of [How to skew element but keep text normal (unskewed)](https://stackoverflow.com/questions/17947565/how-to-skew-element-but-keep-text-normal-unskewed) — Zak, Mar 28 '19 at 17:57

score 1 · Accepted Answer · answered Mar 28 '19 at 18:00

You may add a transformation to a nested element:

HTML:

<button id="btn" type="submit"><span>BUTTON IS THIS</span></button>

CSS:

#btn{
background-color:#29b6f6;
color:#fff;
transform: skewX(-15deg);
}
#btn span {
  display: block;
  transform: skewX(15deg);
}

how to remove the italic behaviour of font. If the button is TILT?

1 Answers1