JSFiddle - React, Tailwind, and code Playground

by Max Lensky

HTML

<a href="#" class="btn">Клац-клац-клац</a>

SCSS

.btn {
		border-left: 1px solid #ba9875;
		color: #ba9875;
    background:#ccc;
        display: inline-block;
		height: 63px;
        line-height: 63px;
		padding: 0 23px;
        padding-right: 43px;
		position: relative;
        text-align: center;
		text-decoration: none;
		white-space: nowrap;
        overflow: hidden;
		
		&:after {
			content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid #ba9875;
            transform-origin: 100% 0;
            transform: skewX(-20deg);
		}
		
		&:hover:after {
			background-color: rgba(186, 152, 117, .3);
		}
	}
 html,body{
   background:-webkit-linear-gradient(#ccc,#000,#cc0000);
 }