CODEWITHSUNDEEP
htmlcss
Nouman Ejaz
Nouman Ejaz

Reputation: 159

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

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 button with italic font . 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;
}

Upvotes: 2

Views: 336

Answers (1)

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

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);
}

Upvotes: 1

Related Questions