.btn{padding:20px 40px;border:none;outline:none;position:relative;z-index:1;border-radius:5px;background:linear-gradient(90deg,#036,teal);cursor:pointer}.btn:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px;background-color:#f1f5f9;z-index:-1;opacity:10%;transition:.2s}.btn:after{content:attr(data);font-size:16px;color:#fff;transition:.2s}.btn:hover:before{left:1px;right:1px;top:1px;bottom:1px;opacity:1}.btn:hover:after{background:linear-gradient(270deg,#036,teal);-webkit-background-clip:text;color:transparent}.buttonvar2{padding:20px 40px;border:none;outline:none;position:relative;z-index:1;border-radius:5px;background:linear-gradient(90deg,#036,teal);cursor:pointer}.buttonvar2:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px;background-color:#fff;z-index:-1;opacity:10%;transition:.2s}.buttonvar2:after{content:attr(data);font-size:16px;color:#fff;transition:.2s}.buttonvar2:hover:before{left:1px;right:1px;top:1px;bottom:1px;opacity:1}.buttonvar2:hover:after{background:linear-gradient(270deg,#036,teal);-webkit-background-clip:text;color:transparent}.footerbtn{padding:20px 40px;border:none;outline:none;position:relative;z-index:1;border-radius:5px;background:linear-gradient(90deg,#036,teal);cursor:pointer}.footerbtn:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px;background-color:#fff;z-index:-1;opacity:10%;transition:.2s}.footerbtn:after{content:attr(data);font-size:16px;color:#fff;transition:.2s}.footerbtn:hover:before{left:1px;right:1px;top:1px;bottom:1px;opacity:1}.footerbtn:hover:after{background:linear-gradient(270deg,#036,teal);-webkit-background-clip:text;color:transparent}@media (max-width:768px){.btn,.buttonvar2,.footerbtn{padding:10px 25px;font-size:14px;border-radius:4px}.btn:after,.buttonvar2:after,.footerbtn:after{font-size:14px}}