uipack-manan/dist/index.css

Tired of writing endless lines of code just to create modern, stylish buttons? Struggling with how to implement them from scratch without spending hours on design and code? Say goodbye to the frustration! With uipack-manan, you can implement beautiful, fu

.btn-container{display:inline-block;margin:1rem;position:relative}.tooltip{animation:tooltip-pop .3s ease-out;background:linear-gradient(135deg,#007bff,#00c6ff);border-radius:8px;bottom:130%;box-shadow:0 8px 15px rgba(0,0,0,.2);color:#fff;font-size:.875rem;opacity:0;padding:.5rem 1rem;pointer-events:none;visibility:hidden;white-space:nowrap;z-index:1000}.tooltip,.tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.tooltip:after{border:6px solid transparent;border-top-color:#111;bottom:-6px;content:""}.btn-container:hover .tooltip{opacity:1;transform:translateX(-50%) translateY(-10px);visibility:visible}@keyframes tooltip-pop{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(-10px)}}@media (max-width:768px){.btn{font-size:.9rem;padding:.6rem 1rem}}@media (max-width:480px){.btn{font-size:.8rem;padding:.5rem .8rem}.tooltip{font-size:.75rem}}

/* !uplift */.btn-uplift{--bg:#000;--hover-bg:#ff90e8;--hover-text:#000;background:var(--bg);border:1px solid var(--bg);border-radius:4px;color:#fff;cursor:pointer;padding:.8em 2em;-webkit-transition:.2s;transition:.2s}.btn-uplift:hover{background:var(--hover-bg);-webkit-box-shadow:.25rem .25rem var(--bg);box-shadow:.25rem .25rem var(--bg);color:var(--hover-text);-webkit-transform:translate(-.25rem,-.25rem);-ms-transform:translate(-.25rem,-.25rem);transform:translate(-.25rem,-.25rem)}.btn-uplift:active{-webkit-box-shadow:none;box-shadow:none;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}

/*! Black Smooth Lift Basic default*/.btn-default{appearance:none;background-color:transparent;border:.125em solid #1a1a1a;border-radius:.9375em;box-sizing:border-box;color:#3b3b3b;cursor:pointer;display:inline-block;font-family:Roobert,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;font-weight:600;line-height:normal;margin:0;min-height:3.75em;min-width:0;outline:none;padding:1em 2.3em;text-align:center;text-decoration:none;touch-action:manipulation;transition:all .3s cubic-bezier(.23,1,.32,1);user-select:none;-webkit-user-select:none;will-change:transform}.btn-default:disabled{pointer-events:none}.btn-default:hover{background-color:#1a1a1a;box-shadow:0 8px 15px rgba(0,0,0,.25);color:#fff;transform:translateY(-2px)}.btn-default:active{box-shadow:none;transform:translateY(0)}

/*! Slide Button */.btn-slide{background:#e8e8e8;border:unset;color:#212121;font-size:17px;font-weight:1000;overflow:hidden;padding:15px 25px;position:relative;z-index:1}.btn-slide,.btn-slide:before{border-radius:15px;-webkit-box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);transition:all .25s}.btn-slide:before{background-color:#212121;content:"";height:100%;left:0;position:absolute;top:0;width:0;z-index:-1}.btn-slide:hover{color:#e8e8e8}.btn-slide:hover:before{width:100%}.btn-pop{background:#e8e8e8;border:0;color:#212121;font-size:17px;font-weight:1000;overflow:hidden;padding:15px 25px;position:relative;z-index:1}.btn-pop,.btn-pop:before{border-radius:15px;-webkit-box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);box-shadow:4px 8px 19px -3px rgba(0,0,0,.27);-webkit-transition:all .25s;transition:all .25s}.btn-pop:before{background-color:#212121;content:"";height:0;left:50%;position:absolute;top:50%;width:0;z-index:-1}.btn-pop:hover{color:#e8e8e8}.btn-pop:hover:before{height:100%;left:0;top:0;width:100%}.btn-pop:active{-webkit-transform:scale(80%);-ms-transform:scale(80%);transform:scale(80%)}.btn-shine{align-items:center;background-color:#fff;border:1px solid rgba(22,76,167,.6);border-radius:10px;color:#1d89ff;cursor:pointer;display:flex;font-family:Roobert,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;font-family:inherit;font-weight:400;justify-content:center;margin:0;outline:none;padding:17px 35px;text-decoration:none;text-transform:uppercase;transition:all .3s cubic-bezier(.02,.01,.47,1);z-index:0}.btn-shine span{color:#164ca7;font-size:14px;font-weight:500;letter-spacing:.7px}.btn-shine:hover{animation:rotate624 .7s ease-in-out both}.btn-shine:hover span{animation:storm1261 .7s ease-in-out both;animation-delay:.06s}@keyframes rotate624{0%{transform:rotate(0deg) translateZ(0)}25%{transform:rotate(3deg) translateZ(0)}50%{transform:rotate(-3deg) translateZ(0)}75%{transform:rotate(1deg) translateZ(0)}to{transform:rotate(0deg) translateZ(0)}}@keyframes storm1261{0%{transform:translateZ(0) translateZ(0)}25%{transform:translate3d(4px,0,0) translateZ(0)}50%{transform:translate3d(-3px,0,0) translateZ(0)}75%{transform:translate3d(2px,0,0) translateZ(0)}to{transform:translateZ(0) translateZ(0)}}.btn-shine{border:1px solid;overflow:hidden;position:relative}.btn-shine span{z-index:20}.btn-shine:after{background:#38ef7d;content:"";height:155px;left:-75px;opacity:.4;position:absolute;top:-50px;transform:rotate(35deg);width:50px;z-index:-10}.btn-shine:after,.btn-shine:hover:after{transition:all .55s cubic-bezier(.19,1,.22,1)}.btn-shine:hover:after{left:120%}

/* !Magic */.magic{background:#fec195;border:3px solid #fec195;border-radius:8px;box-shadow:0 0 0 #fec1958c;color:#181818;cursor:pointer;font-size:17px;font-weight:500;padding:12px 35px;position:relative;transition:all .3s ease-in-out}.star-1{filter:drop-shadow(0 0 0 #fffdef);height:auto;left:20%;position:absolute;top:20%;transition:all 1s cubic-bezier(.05,.83,.43,.96);width:25px;z-index:-5}.star-2{left:45%;top:45%;width:15px}.star-2,.star-3{filter:drop-shadow(0 0 0 #fffdef);height:auto;position:absolute;transition:all 1s cubic-bezier(0,.4,0,1.01);z-index:-5}.star-3{left:40%;top:40%;width:5px}.star-4{left:40%;top:20%;transition:all .8s cubic-bezier(0,.4,0,1.01);width:8px}.star-4,.star-5{filter:drop-shadow(0 0 0 #fffdef);height:auto;position:absolute;z-index:-5}.star-5{left:45%;top:25%;transition:all .6s cubic-bezier(0,.4,0,1.01);width:15px}.star-6{filter:drop-shadow(0 0 0 #fffdef);height:auto;left:50%;position:absolute;top:5%;transition:all .8s ease;width:5px;z-index:-5}.magic:hover{background:transparent;box-shadow:0 0 25px #fec1958c;color:#fec195}.magic:hover .star-1{left:-30%;top:-80%;width:25px}.magic:hover .star-1,.magic:hover .star-2{filter:drop-shadow(0 0 10px #fffdef);height:auto;position:absolute;z-index:2}.magic:hover .star-2{left:10%;top:-25%;width:15px}.magic:hover .star-3{left:25%;top:55%;width:5px}.magic:hover .star-3,.magic:hover .star-4{filter:drop-shadow(0 0 10px #fffdef);height:auto;position:absolute;z-index:2}.magic:hover .star-4{left:80%;top:30%;width:8px}.magic:hover .star-5{left:115%;top:25%;width:15px}.magic:hover .star-5,.magic:hover .star-6{filter:drop-shadow(0 0 10px #fffdef);height:auto;position:absolute;z-index:2}.magic:hover .star-6{left:60%;top:5%;width:5px}.fil0{fill:#fffdef}