clickstyles/dist/clickstyles.min.js

A collection of animated styles for buttons, CTAs, links, cards, toggles, and other interactive UI elements.

/* empty css                   */document.querySelectorAll(".cs__btn-expand-reveal").forEach(e=>{const n=e.textContent.trim(),a=e.dataset.csBtnSuffix||"";e.textContent="";const o=document.createElement("span");o.classList.add("cs__btn-inner");const d=document.createElement("span");d.classList.add("cs__btn-static"),d.textContent=n;const t=document.createElement("span");t.classList.add("cs__btn-animated"),t.style.width="0";const u=document.createElement("span");u.textContent=" ",u.classList.add("cs__btn-space"),t.appendChild(u),a.split("").forEach(_=>{const g=document.createElement("span");g.textContent=_,t.appendChild(g)}),o.appendChild(d),o.appendChild(t),e.appendChild(o);const i=t.querySelectorAll("span:not(.cs__btn-space)"),v=()=>{gsap.killTweensOf(t),gsap.killTweensOf(i);const _=t.scrollWidth;gsap.to(t,{width:_,duration:.3,ease:"power2.out",overwrite:!0}),gsap.to(i,{y:0,opacity:1,rotationZ:0,duration:.3,stagger:{each:.05,from:"start"},ease:"back.out(1.7)",overwrite:!0})},y=()=>{gsap.killTweensOf(t),gsap.killTweensOf(i),gsap.to(i,{y:30,opacity:0,rotationZ:-30,duration:.2,stagger:{each:.04,from:"end"},ease:"power2.in",overwrite:!0}),gsap.to(t,{width:0,duration:.2,delay:.1,ease:"power2.inOut",overwrite:!0})};e.addEventListener("mouseenter",v),e.addEventListener("mouseleave",y)});const S=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),r=document.querySelector(".cs__btn-magnetic");r.addEventListener("mousemove",e=>{const n=r.getBoundingClientRect(),a=e.clientX-n.left-n.width/3,o=e.clientY-n.top-n.height/3;gsap.to(r,{x:a*.4,y:o*.4,duration:.3,ease:"power2.out"})});r.addEventListener("mouseleave",()=>{gsap.to(r,{x:0,y:0,duration:.3,ease:"power2.out"})});const h=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),s=document.querySelector(".cs__btn-press-bounce");s.addEventListener("mousedown",()=>{gsap.to(s,{scale:.9,duration:.1})});s.addEventListener("mouseup",()=>{gsap.to(s,{scale:1.05,duration:.15,ease:"elastic.out(1, 0.5)"})});s.addEventListener("mouseleave",()=>{gsap.to(s,{scale:1,duration:.2})});const w=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),c=document.querySelector(".cs__btn-pulse-pop");c.addEventListener("mouseenter",()=>{gsap.to(c,{scale:1.1,duration:.2,ease:"power1.out"})});c.addEventListener("mouseleave",()=>{gsap.to(c,{scale:1,duration:.2,ease:"power1.inOut"})});const E=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),j=document.querySelectorAll(".ripple-btn");j.forEach(e=>{e.addEventListener("mouseenter",()=>{e.querySelector("::before"),gsap.to(e,{scale:1.1,duration:.3})}),e.addEventListener("mouseleave",()=>{gsap.to(e,{scale:1,duration:.3})})});const O=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),l=document.querySelector(".ca__btn-shine"),L=l.querySelector(".ca__btn-shine_effect"),p=gsap.timeline({paused:!0});p.to(l,{scale:1.08,backgroundColor:"#007bff",boxShadow:"0 8px 25px rgba(0, 0, 0, 0.4)",duration:.3,ease:"power2.out",overwrite:"auto"}).to(L,{x:"200%",opacity:1,duration:.6,ease:"power1.inOut"},"<0.1");l.addEventListener("mouseenter",()=>p.play());l.addEventListener("mouseleave",()=>p.reverse());const x=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),f=document.querySelector(".cs__btn-shine"),T=f.querySelector(".cs__shine");f.addEventListener("mouseenter",()=>{gsap.fromTo(T,{left:"-75%"},{left:"125%",duration:1,ease:"power2.inOut"})});const q=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),m=document.querySelector(".cs__btn-slideIn-bounce span");m.parentElement.addEventListener("mouseenter",()=>{gsap.fromTo(m,{y:"100%"},{y:"0%",duration:.5,ease:"bounce.out"})});const C=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),b={pink:"conic-gradient(#ff6ec4, #fcb1ff, #ff6ec4)",neon:"conic-gradient(#00f0ff, #39ff14, #00f0ff)",aqua:"conic-gradient(#00c9ff, #92fe9d, #00c9ff)",fire:"conic-gradient(#ff4e50, #f9d423, #ff4e50)",rainbow:"conic-gradient(red, orange, yellow, green, blue, indigo, violet, red)"};document.querySelectorAll(".cs__btn-spin-bg").forEach(e=>{const n=e.querySelector(".cs__btn-spin-bg__ring"),a=e.dataset.variant||"pink";n.style.background=b[a]||b.rainbow;let o;e.addEventListener("mouseenter",()=>{o=gsap.to(n,{rotate:360,duration:3,repeat:-1,ease:"none"})}),e.addEventListener("mouseleave",()=>{o&&o.kill(),gsap.set(n,{rotate:0})})});const P=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),k=Object.assign({"./animations/button/expand-reveal.js":S,"./animations/button/magnetic.js":h,"./animations/button/press-bounce.js":w,"./animations/button/pulse-pop.js":E,"./animations/button/ripple.js":O,"./animations/button/shine.js":x,"./animations/button/shiny.js":q,"./animations/button/slideIn.js":C,"./animations/button/spin-bg.js":P});console.log("Loaded animation modules:",k);