:root{--green: #10b981;--red: #e74c3c;--blue: #039be5;--blue-dark: #180837;--yellow: #f1c40f;--purple: #8e44ad;--dark_purple: #542966;--turquoise: #1abc9c;--violete: #c7c4ed}.btn-blue{color:#fff;position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,#194fff,#001cb9);background-size:200% 200%;background-position:50% 50%;border-radius:.5rem;padding-inline:1.5rem;padding-block:.5rem;display:flex;justify-content:center;align-items:center}.btn-blue:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:var(--blue);z-index:-1;transition:width .5s ease-in-out}.btn-blue:hover{color:#fff;background-position:100% 100%}.btn-blue:hover:after{width:110%}.btn-purple{color:#fff;position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,#1a74d9,#6358ea);background-size:200% 200%;background-position:50% 50%;border-radius:.5rem;border:2px solid #1a74d9;padding-inline:1.5rem;padding-block:.5rem;display:flex;justify-content:center;align-items:center}.btn-purple:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:var(--violete);z-index:-1;transition:width .5s ease-in-out}.btn-purple:hover{opacity:.9}.btn-purple.clicked{color:#6358ea;background-position:100% 100%;background:#fff;border:2px solid #6358ea}.btn-purple.clicked:after{width:110%}.btn-green{color:#fff;position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,green,var(--green));background-size:200% 200%;background-position:50% 50%;border-radius:30px;border:2px solid green}.btn-green:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:#4b7ff1;z-index:-1;transition:width .5s ease-in-out}.btn-green:hover{background-position:100% 100%;background:#fff;border:2px solid var(--green)}.btn-green:hover:after{width:110%}.btn-blue-h{position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,#194fff,#001cb9);background-size:200% 200%;background-position:50% 50%;padding:4px 16px;border-radius:.375rem}.btn-blue-h:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:var(--blue);z-index:-1;transition:width .5s ease-in-out}.btn-blue-h:hover{color:#fff;background-position:100% 100%}.btn-blue-h:hover:after{width:110%}.btn-lilac{display:inline-block;padding-block:4px;padding-inline:2em;text-align:center;transition:all .4s ease-out 0s;border-radius:4px;background-image:linear-gradient(to right,#c90075,#de00ac,#c90075);background-size:200% auto;background-position:left center;background-repeat:no-repeat;box-shadow:0 2px #0000001a,inset 0 -1px 1px #fff3}.btn-lilac:hover{background-position:right center}.btn-yellow{color:#000;position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,#ffc947,var(--yellow));background-size:200% 200%;background-position:50% 50%;border-radius:.5rem;padding-inline:1.5rem;padding-block:.5rem;display:flex;justify-content:center;align-items:center;border:2px solid #ffc947}.btn-yellow:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:var(--blue-dark);z-index:-1;transition:width .5s ease-in-out}.btn-yellow:hover{color:#fff;background-position:100% 100%;border:2px solid #ffc947}.btn-yellow:hover:after{width:110%}.btn-yellow-acid{color:#000;position:relative;overflow:hidden;z-index:1;transition:color .15s ease-in-out,background-position .5s ease;background:linear-gradient(45deg,#8fba06,#c1fe00);background-size:200% 200%;background-position:50% 50%;border-radius:.5rem;padding-inline:1.5rem;padding-block:.5rem;display:flex;justify-content:center;align-items:center;border:2px solid #8fba06}.btn-yellow-acid:after{content:"";position:absolute;display:block;top:0;left:50%;transform:translate(-50%);width:0;height:100%;background:#c1fe00;z-index:-1;transition:width .5s ease-in-out}.btn-yellow-acid:hover{color:#475714;background-position:100% 100%;border:2px solid #8fba06}.btn-yellow-acid:hover:after{width:110%}