Not Skewed Text In Skewed Class Button

I've created a button for my website with a CSS class and I wanted it to have a parallelogram shape so I've used the skew function to create the shape. The code was right and the b

Solution 1:

Partly seconding Sidharth, I think you won't get around the wrapper element to apply the CSS-transform on and then reset it for its child elements (the submit-input):

<div class="button-wrapper">
  <input type="submit" alt="submit" value="Login">
</div>

Sidharth's answer implies that you completely hide the original <input> and relies on JavaScript to trigger a click on it when the styled wrapper is clicked, but here's and easy way around that: Style the button-wrapper on :hover and remove all styles from the nested <input>-element and make it 100% wide (jsBin example):

.button-wrapper {
  background: #fff;
  border: 1px solid #bbb;
  border-color: #ddd #ccc #bbb;
  overflow: hidden;

  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);
}

.button-wrapper:hover {
  background: #efe;
  border-color: #090;
}

.button-wrapper input {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 0;
  margin: 0;
  width: 100%;

  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-wrapper input:hover {
  color: #060;
}

Solution 2:

I know years have past, but I just ran into this same problem and found that simply doing the reverse skew on the text solved my problem, as follows in my code:

.yellowShape {
     background-color: rgba(244,255,88,0.92);
     padding: 3px;
     -webkit-transform: skew(20deg);
     transform: skew(20deg); 
}

.yellowShape p {
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg); 
}

Solution 3:

Create a wrapper for the "button" and put the text inside that. However, you would need to use javascript to trigger a "click" on the button if the text is clicked as it would not otherwise "propagate" to the button.