Button slant right with icon

<div class='outer'>
  Call me back
</div>

Source: stackoverflow.com

Button slant right with icon

.outer {
  position: relative;
  height: 75px;
  width: 300px;
  text-align: center;
  line-height: 75px;
  color: white;
  text-transform: uppercase;
}
.outer:before,
.outer:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  width: 55%;
  background: purple;
  border: 2px solid white;
  border-left-width: 3px;
  z-index: -1;
}
.outer:before {
  left: 0px;
  border-radius: 20px;
  border-right: none;
  transform: skew(20deg);
  transform-origin: top left;
  background: seagreen;
  border-color: red;
}
.outer:after {
  right: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
  background: yellowgreen;
  border-color: maroon;
}

/* Just for demo of responsive nature */

.outer{
  transition: all 1s;
}
.outer:hover{
  height: 100px;
  width: 400px;
  line-height: 100px;
}
body{
  background: lightblue;
}

Source: stackoverflow.com

Similar codes

0 vote187 views1 answer
Css background half one color the other half another color
CSS
0 vote192 views2 answers
Css full cover background image
CSS
0 vote224 views1 answer
Checkbox border css
CSS
0 vote211 views1 answer
Bootstrap modal overflow
CSS
2 votes194 views1 answer
Transform:translateX()
CSS
0 vote185 views1 answer
Label width css
CSS
20 votes203 views2 answers
Div circle
CSS
0 vote203 views1 answer
Flex-wrap#verhindert auslaufen aus container
CSS
0 vote214 views1 answer
Var units = "years"; var davidAge = 65; var johnAge = 40; var ageDifference = davidAge - johnAge; alert("The age difference is " + ageDifference + " " + units);
CSS
0 vote216 views3 answers
Hyper text programming language
CSS