.outer {<br /> position: relative;<br /> height: 75px;<br /> width: 300px;<br /> text-align: center;<br /> line-height: 75px;<br /> color: white;<br /> text-transform: uppercase;<br /> }<br /> .outer:before,<br /> .outer:after {<br /> position: absolute;<br /> content: ”;<br /> top: 0px;<br /> height: 100%;<br /> width: 55%;<br /> background: purple;<br /> border: 2px solid white;<br /> border-left-width: 3px;<br /> z-index: -1;<br /> }<br /> .outer:before {<br /> left: 0px;<br /> border-radius: 20px;<br /> border-right: none;<br /> transform: skew(20deg);<br /> transform-origin: top left;<br /> background: seagreen;<br /> border-color: red;<br /> }<br /> .outer:after {<br /> right: 0px;<br /> border-top-right-radius: 20px;<br /> border-bottom-right-radius: 20px;<br /> border-left: none;<br /> background: yellowgreen;<br /> border-color: maroon;<br /> }</p> <p>/* Just for demo of responsive nature */</p> <p>.outer{<br /> transition: all 1s;<br /> }<br /> .outer:hover{<br /> height: 100px;<br /> width: 400px;<br /> line-height: 100px;<br /> }<br /> body{<br /> background: lightblue;<br /> }

<div class=”outer”><br /> Call me back<br /> </div>