I crafted a button for my website using a CSS class, aiming for a parallelogram shape by utilizing the skew function. The code worked like a charm, giving the button the desired shape. However, I encountered a dilemma where the text inside the button also became skewed, following the shape of the button. Is there a way to prevent the text from looking like the Leaning Tower when inside the button? Here's the HTML code:
<input type="submit" alt="submit" value="Login" class="button">
And here's the CSS for the button class:
.button {
float: top;
width: 275px;
height: 40px;
margin-top: 6px;
display: inline-block;
font-family: Impact;
text-align: center;
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
}