I have to make these bootstrap buttons diagonal, the problem is that when I force diagonal on the buttons the text is also placed diagonally making an italic effect. I would like to keep the text as normal but I don't know how to do it, have I thought of a property that affects only the text? But I can't do it. Thank you.
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button class="btn btn-dark" style="transform: skewX( -22deg );" type="button">More... </button> <button class="btn btn-info" style="transform: skewX( -22deg ); background-color: #007ac3; border-color: #007ac3;" type="button">More...</button>
</body>
You can add a label
span
to the button text to later subtract the degrees only from the text:One possible solution is to enclose that text in an element
<div>
and apply the transform attribute to it with the inverted value of the same attribute as its container, i.e. change this:For this:
Here is an example snippet: