button slant right with icon

Solutions on MaxInterview for button slant right with icon by the best coders in the world

showing results for - "button slant right with icon"
Jakob
28 Feb 2019
1.outer {
2  position: relative;
3  height: 75px;
4  width: 300px;
5  text-align: center;
6  line-height: 75px;
7  color: white;
8  text-transform: uppercase;
9}
10.outer:before,
11.outer:after {
12  position: absolute;
13  content: '';
14  top: 0px;
15  height: 100%;
16  width: 55%;
17  background: purple;
18  border: 2px solid white;
19  border-left-width: 3px;
20  z-index: -1;
21}
22.outer:before {
23  left: 0px;
24  border-radius: 20px;
25  border-right: none;
26  transform: skew(20deg);
27  transform-origin: top left;
28  background: seagreen;
29  border-color: red;
30}
31.outer:after {
32  right: 0px;
33  border-top-right-radius: 20px;
34  border-bottom-right-radius: 20px;
35  border-left: none;
36  background: yellowgreen;
37  border-color: maroon;
38}
39
40/* Just for demo of responsive nature */
41
42.outer{
43  transition: all 1s;
44}
45.outer:hover{
46  height: 100px;
47  width: 400px;
48  line-height: 100px;
49}
50body{
51  background: lightblue;
52}
Deborah
23 May 2020
1<div class='outer'>
2  Call me back
3</div>