Search code examples
cssbuttonskew

Semi skew button css

I would like to make this kind of button in CSS.
Could you help me to do this ?
Skew transformation is not enough...

button semi skew

Thankyou

Solution

  • We can make use of pseudo elements of the button to make it look like the picture...

    HTML

    <button class="skew-btn">Skew Button</button>

    CSS

    .skew-btn
{
  padding:14px;
  border:none;
  background: linear-gradient(to right,#2196F3,#8BC34A);
  color:#fff;
  font-weight:600;
  font-size:26px;
  position: relative;
}
.skew-btn::before,
.skew-btn::after
{
  content:"";
  position: absolute;
  height:0px;
  width:0px;
  border:10px solid #fff;
}

.skew-btn::before
{
  top:0;
  left:0;
  border-bottom-color:transparent;
  border-right-color:transparent;
}
.skew-btn::after
{
  bottom:0;
  right:0;
  border-left-color:transparent;
  border-top-color:transparent;
}

    Make changes if needed..

    Hope this helps

    CodePen Link

    .skew-btn {
  padding: 14px;
  border: none;
  background: linear-gradient(to right, #2196F3, #8BC34A);
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  position: relative;
  outline: 0;
}

.skew-btn::before,
.skew-btn::after {
  content: "";
  position: absolute;
  height: 0px;
  width: 0px;
  border: 10px solid #fff;
}

.skew-btn::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.skew-btn::after {
  bottom: 0;
  right: 0;
  border-left-color: transparent;
  border-top-color: transparent;
}
    <button class="skew-btn">Skew Button</button>