Unskew text in the center of a DIV

I'm skewing the border of a DIV so that I can create a parallelogram border around text.
I don't want the text skewed, but I can't figure out how to "un-skew" it.

This code is from a WordPress website - I'm using a plugin called Visual Composer.

The code works, the border is skewed as I want - but the text inside is also skewed.

Any help would be appreciated.

Here's my css:

.p_gram_button {
  text-align:center;
  padding-top:5px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100px;
  height: 30px;
  border-style: solid;
  border-color: #f36e21;
  font-size:18px;
  color:#fffff !important;

  -o-text-overflow: clip;
  text-overflow: clip;
  -webkit-transform:    skewX(-20deg);
  transform:    skewX(-20deg);
  
}

.p_gram_button p{
    text-align:center;
	color:#fff;
font-style: normal !important; 
    
}

<!-- HTML -->
<div class="vc_wp_text wpb_content_element p_gram_button">
	<div class="widget widget_text">			
		<div class="textwidget">
		<p><span class="inner_text_p">More Details</span></p>
		</div>
	</div>
</div>

Select allOpen in new window