How to make the text inside the button not be tilted?

Asked

Viewed 57 times

3

<!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 put the negative 40-degree button on the x-axis transform: skew(-40deg), the text inside the button is tilted also I tried several shapes so text does not tilt together, but it did not help! who can help I am very grateful.

html css

3 answers

1

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>

I hope I’ve helped.

-1

Try it this way: 

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

        .exemplo {
            transform: skew(40deg);
        }
    </style>
</head>
<body>

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

</body>
</html>

  • It didn’t work! had already tried this method!

  • 5

    The problem has to do with display:inline of <span>. Change for block already works.

  • 1

    That even worked, thanks friend! I suggest you put an answer so I mark as solved.

-2

Just put your text inside another element, and apply a different rule to it. Example:

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

Here, I put your text inside a <span>, and then I apply the rule on .css:

.slanted > span {
  display:block;
  transform: skew(40deg) !important;
}

How is a <span>, it was necessary to insert a display:block to change its default value which is inline, and then I pass one transform with the inverse value to that used in the button, and put a !important to override the property on the <span>, thus having the result you expect.

Hope I helped, hugs!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.