.primary-btn{background-color:var(--primary-color);width:max-content;display:inline-block;position:relative;overflow:hidden}.primary-btn span{color:#fff;text-transform:uppercase;background-color:#0000;padding:12px 22px;font-size:16px;font-weight:600;transition:all .6s;display:block}.primary-btn span:nth-child(2){background-color:var(--primary-color);position:absolute;top:0;left:0;transform:translateY(100%)}.primary-btn.dark:after{background-color:#000}.primary-btn.gray:after{background-color:#f4f4f4}.primary-btn:after{content:"";background-color:#fff;width:20px;height:40px;position:absolute;bottom:-20px;right:-10px;transform:rotate(40deg)}.primary-btn:hover span{padding-inline:28px}.primary-btn:hover span:first-child{transform:translateY(-100%)}.primary-btn:hover span:nth-child(2){transform:translateY(0)}