change the shape of a button

Question

i want to change the shape of the button but the text inside of it also changes

i've trid to to put a span inside of it but it didn't work

    
    .btn {
        border-radius: 0px;
        border: none;
        padding: 0.66em 4em;
        color: rgb(68, 114, 241);
        cursor: pointer;
        background-color: #FFF;
        border: 1px solid rgb(45, 110, 206);
        font-size: 1em;
        transform: skewX(-18deg);
    }

 <button class="btn">click me</button>

score 0 · Accepted Answer · answered Sep 09 '19 at 13:54

.btn {
  border-radius: 0px;
  border: none;
  padding: 0.66em 4em;
  color: rgb(68, 114, 241);
  cursor: pointer;
  background-color: #FFF;
  border: 1px solid rgb(45, 110, 206);
  font-size: 1em;
  transform: skewX(-18deg);
}
.btn span{
  transform: skewX(18deg);
  margin: 0px;
  display: block;
}

<button class="btn"><span>click me</span></button>

try span with display:block it will works.

change the shape of a button

1 Answers1