I have to make a button like this in CSS:
I know I can do this by cropping the image and setting input to image but I wanted to do this in CSS . I found a way that ALMOST would help me what it would be:
.botao{
transform: skew(10deg);
}
But he turns the knob and leaves the 2 ends cut (like the image below, only on the right side the same thing). You need to leave the image above.
You can use the combination of position: relative with position: absolute next to a pseudo element like :before or :after , similar to the one I answered How to make the button tilted?
In this example I removed the pseudo element :after (we only need one, in this case the :before ) you will also need to change border-top to border-bottom if you want tilt to end at the top of the button. p>
If you want the slope of the left side (here you should set border-bottom as height , ie 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 of the right side, change right: by left: and border-right by border-left within the pseudo element (here you must set border-top as height , that is, 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>Here's how to do it:
.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>I used transform-origin, got close enough:
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>