html – How to make the text inside the button not be skewed?

Question:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button</title>
    <style>
        .slanted {
            width: 200px;
            height: 50px;
            border: 2px solid #9b9999;
            background: linear-gradient(to right, #ff00dd, #e03e3e);
            outline: none;
            color: #e4e1e1;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            margin: 5px 5px 5px 15px;
            transform: skew(-40deg);
        }
    </style>
</head>
<body>
    
    <button class="slanted button1" type="button">Login</button>    

</body>
</html>

I'm creating a button for a site I'm developing, but the problem is that when I tilt the button 40 degrees minus the x-axis transform: skew(-40deg) , the text inside the button is skewed too. not lean along, but to no avail! anyone who can help, I'm very grateful.

Answer:

Just add in the style of the .example{} display:block; and transform: skew(40deg);

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button</title>
    <style>
        .slanted {
            width: 200px;
            height: 50px;
            border: 2px solid #9b9999;
            background: linear-gradient(to right, #ff00dd, #e03e3e);
            outline: none;
            cursor: pointer;
            margin: 5px 5px 5px 15px;
            transform: skew(-40deg);
            
        }

        .exemplo {
            color: #e4e1e1;
            font-size: 20px;
            font-weight: bold;  
            display:block;
            transform: skew(40deg);
        }
    </style>
</head>
<body>

    <button class="slanted button1" type="button">
          <span class="exemplo">Login</span>
    </button>    

</body>
</html>

Hope this helps.

Scroll to Top