CSS: button slant right with icon Example
CSS Example: This is the "button slant right with icon" Example. compiled from many sources on the internet by SimpleTutorials.org
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; }
button slant right with icon
Call me back
* Summary: This "button slant right with icon" CSS Example is compiled from the internet. If you have any questions, please leave a comment. Thank you!