Button diagonally only the left side

Question

I have to make a button like this in CSS:

I know I can do this by cutting out the image and putting the input as image but I wanted to do it in CSS. I found a way that ALMOST would help me that would be:

.botao{
    transform: skew(10deg);
}

But it turns the button and leaves with the 2 cut ends (like the image below, only on the right side the same thing). Need to leave as per the image above.

Answer 1

Below is an option on how to do:

.forma {
  border-top: 60px solid #DB005C;
  border-left: 20px solid transparent;
  border-right: transparent;
  border-bottom: transparent;
  width: 250px;
  color: #FFF;
  text-align: center;
  position: relative;
  cursor: pointer;
  background-color: transparent;
  
}

.textoForma {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  bottom: 4px;
  margin: auto;
  left: 30px;
  font-size: 43px;
  font-weight: 700;
}

button:focus {
  outline:0;
}

<button class="forma">
  <p class="textoForma">ENVIAR</p>
</button>

Answer 2

You can use the combination of position: relative with position: absolute together with a pseudo element such as :before or :after, similar to the one I answered How to Make Tilt Button?

In this example I removed the pseudo element :after (we will only need one, in case the :before) will also need to exchange the border-top for border-bottom if you want the tilt to end at the top of the button.

If you want the slope on the side left (here you must adjust the border-bottom as per the height, or both should be the same size):

.botao {
  border: none; /*remove borda do elemento button*/
  color: #fff;
  position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
  display: inline-block;
  background-color: #CC0000;
  line-height: 20px; /*Centraliza o texto*/
  height: 20px;
  padding:0 10px;
  margin: 0 10px;
}

.botao:before {
  content: "";
  width: 0px;
  height: 0px;
  top: 0px;
  position: absolute;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #CC0000;
  left: -15px;
}

<button class="botao">tag BUTTON</button>
<div class="botao">tag DIV</div>

If you want the slope on the side right, change right: for left: and border-right for border-left within the pseudo element (here you should adjust the border-top as per the height, or both should be the same size):

.botao {
  border: none; /*remove borda do elemento button*/
  color: #fff;
  position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
  display: inline-block;
  background-color: #CC0000;
  line-height: 20px; /*Centraliza o texto*/
  text-align: center;
  height: 20px;
  padding:0 10px;
  margin: 0 10px;
}

.botao:before {
  content: "";
  width: 0px;
  height: 0px;
  top: 0px;
  position: absolute;
  border-bottom: 20px solid transparent;
  border-left: 15px solid #CC0000;
  right: -15px;
}

<button class="botao">tag BUTTON</button>
<div class="botao">tag DIV</div>

Applying the effect very close to what you expect:

.botao {
  border: none; /*remove borda do elemento button*/
  color: #fff;
  font-size: 14pt;
  font-weight: bold;
  position: relative;/*faz os elementos pseudos acompanharem o elemento com a classe*/
  display: inline-block;
  background-color: #DC005E;
  line-height: 65px; /*Centraliza o texto*/
  text-align: center;
  height: 65px;
  margin-left: 20px;
  width: 260px;
}

.botao:before {
  content: "";
  width: 0px;
  height: 0px;
  top: 0px;
  position: absolute;
  border-bottom: 65px solid transparent;
  border-right: 20px solid #DC005E;
  left: -20px;
}

<button class="botao">tag BUTTON</button>
<div class="botao">tag DIV</div>

Answer 3

I used Transform-origin, I could get very close:

Example:

button {
  border: none;
  font-weight: bold;
  width: 300px;
  height: 100px;
  background-color: #DC005E;
  -webkit-transform: perspective(300px) rotateX(-30deg);
  -o-transform: perspective(300px) rotateX(-30deg);
  -moz-transform: perspective(300px) rotateX(-30deg);
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  margin: 10px 90px;
  font-family: "Times New Roman", Times, serif;
  font-size: 60px;
  color: #FDFEFE;
}

<button>Enviar</button>