change the shape of a button : <p>i want to change the shape of the button but the text inside of it also changes</p>

<p>i've trid to to put a span inside of it but it didn't work</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    
    .btn {
        border-radius: 0px;
        border: none;
        padding: 0.66em 4em;
        color: rgb(68, 114, 241);
        cursor: pointer;
        background-color: #FFF;
        border: 1px solid rgb(45, 110, 206);
        font-size: 1em;
        transform: skewX(-18deg);
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;button class="btn"&gt;click me&lt;/button&gt;</code></pre>
</div>
</div>
</p>
