3

tenho que fazer um botão dessa forma no CSS:

inserir a descrição da imagem aqui

Sei que consigo fazer isso recortando a imagem e colocando o input como image mas queria fazer isso no CSS. Achei uma forma que QUASE me ajudaria que seria:

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

Mas ele gira o botão e deixa com as 2 pontas cortadas (como a imagem abaixo, só que do lado direito a mesma coisa). Precisa deixar conforme a imagem acima.

2

3 Respostas 3

8

Segue abaixo uma opção de como fazer:

.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>

4
  • 1
    +1 Ficou bem mais legal que meu pog lá hahaha só add um cursor pointer e um hover e fica um button de verdade. jsfiddle.net/gabrielr47/q41p91ef 28/04/2016 às 20:39
  • @GabrielRodrigues, editei a resposta e adicionei o cursor:pointer, agora fico top, vlw !
    – David
    29/04/2016 às 20:18
  • 1
    Perceba também que a área da div é maior que a área desenhada, é possível acessar o cursor de fora do button. 29/04/2016 às 20:19
  • 1
    @GabrielRodrigues, arrumei .. vlw
    – David
    29/04/2016 às 20:31
3

Você pode usar a combinação de position: relative com position: absolute junto a um pseudo elemento como :before ou :after, semelhante a esta que eu respondi Como fazer botão Inclinado?

Neste exemplo eu removi o pseudo elemento :after (só necessitaremos de um, no caso o :before) também necessitará trocar o border-top por border-bottom se quiser que inclinação termine na parte superior do botão.

Se quiser a inclinação do lado esquerdo (aqui você deve ajustar o border-bottom conforme o height, ou seja ambos devem ter o mesmo tamanho):

.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>

Se quiser a inclinação do lado direito, troque right: por left: e border-right por border-left dentro do pseudo elemento (aqui você deve ajustar o border-top conforme o height, ou seja ambos devem ter o mesmo tamanho):

.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>

Aplicando o efeito bem próximo ao que espera:

.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>

0
2

Utilizei transform-origin, deu pra chegar bem próximo:

Exemplo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .