35:I[8054,["/_next/static/chunks/0n8co495bugh0.js","/_next/static/chunks/0csmpwpm9scwv.js","/_next/static/chunks/2tf14-0oaa2ok.js","/_next/static/chunks/0i6pfab6ujd9i.js","/_next/static/chunks/32u7gfw7_j3cs.js"],"EffectCard"] 36:Taff,.fx-ava-flux-actions { display: inline-flex; flex-direction: column; align-items: center; gap: 11px; padding: 16px; font-family: "Segoe UI", system-ui, sans-serif; } .fx-ava-flux-actions-shell { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; } .fx-ava-flux-actions-face { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(150deg, #0369a1, #061019); color: #e0f2fe; font-size: 26px; font-weight: 700; letter-spacing: 1px; transition: filter 0.4s ease; } .fx-ava-flux-actions-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 50%; background: rgba(4, 10, 16, 0.74); opacity: 0; transition: opacity 0.35s ease; } .fx-ava-flux-actions-icon { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; background: rgba(224, 242, 254, 0.14); box-shadow: inset 0 0 0 1px rgba(224, 242, 254, 0.35); transform: translateY(10px); transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3), background 0.3s ease; } .fx-ava-flux-actions-icon:nth-child(2) { transition-delay: 0.05s; } .fx-ava-flux-actions-icon:nth-child(3) { transition-delay: 0.1s; } .fx-ava-flux-actions-chat::before { content: ""; position: absolute; top: 7px; left: 6px; width: 14px; height: 9px; border-radius: 3px; background: #e0f2fe; } .fx-ava-flux-actions-chat::after { content: ""; position: absolute; top: 15px; left: 9px; width: 0; height: 0; border-top: 5px solid #e0f2fe; border-right: 5px solid transparent; } .fx-ava-flux-actions-star::before { content: ""; position: absolute; top: 6px; left: 6px; width: 14px; height: 14px; clip-path: polygon(50% 0%, 62% 36%, 100% 38%, 70% 60%, 80% 98%, 50% 75%, 20% 98%, 30% 60%, 0% 38%, 38% 36%); background: #e0f2fe; } .fx-ava-flux-actions-plus::before { content: ""; position: absolute; top: 12px; left: 6px; width: 14px; height: 2px; border-radius: 1px; background: #e0f2fe; } .fx-ava-flux-actions-plus::after { content: ""; position: absolute; top: 6px; left: 12px; width: 2px; height: 14px; border-radius: 1px; background: #e0f2fe; } .fx-ava-flux-actions-icon:hover { background: rgba(56, 189, 248, 0.42); } .fx-ava-flux-actions-shell:hover .fx-ava-flux-actions-face { filter: blur(1px) brightness(0.8); } .fx-ava-flux-actions-shell:hover .fx-ava-flux-actions-veil { opacity: 1; } .fx-ava-flux-actions-shell:hover .fx-ava-flux-actions-icon { transform: translateY(0); } .fx-ava-flux-actions-name { color: #8b95a5; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }6:["$","main",null,{"className":"page-shell","children":[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://librarycss.com/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#actions\",\"item\":\"https://librarycss.com/en/tags/actions\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"actions CSS effects\",\"description\":\"Free CSS effects tagged \\\"actions\\\".\",\"url\":\"https://librarycss.com/en/tags/actions\",\"inLanguage\":\"en-US\",\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":1,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Flux Hover Action Overlay\",\"url\":\"https://librarycss.com/en/effects/ava-flux-actions\"}]}}]"}}],["$","div",null,{"className":"page-container max-w-[1500px]","children":[["$","nav",null,{"aria-label":"Breadcrumbs","className":"min-w-0","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1 text-xs text-[color:var(--muted)]","children":[["$","li","/en",{"className":"flex min-w-0 items-center gap-1","children":[false,["$","$L1b",null,{"href":"/en","className":"truncate hover:text-[color:var(--foreground)]","children":"Home"}]]}],["$","li","/en/tags/actions",{"className":"flex min-w-0 items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":12,"height":12,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right shrink-0 text-[color:var(--faint)]","aria-hidden":true,"children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","span",null,{"className":"truncate font-medium text-[color:var(--foreground)]","aria-current":"page","children":"#actions"}]]}]]}]}],["$","header",null,{"className":"mt-4","children":[["$","h1",null,{"className":"text-3xl font-bold tracking-[-0.04em] text-[color:var(--foreground)] sm:text-4xl","children":["#","actions"," CSS effects"]}],["$","p",null,{"className":"mt-3 max-w-3xl text-sm leading-6 text-[color:var(--muted)]","children":["1"," free, pure-CSS effects match the \"","actions","\" tag. Each is copy-ready and needs no library or build step."]}]]}],[["$","h2",null,{"className":"sr-only","children":"Effects tagged #actions"}],["$","div",null,{"className":"mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","children":[["$","$L35","ava-flux-actions",{"effect":{"id":"ava-flux-actions","title":"Flux Hover Action Overlay","category":"Avatars","description":"Three drawn action buttons rise over the blurred portrait while it is hovered.","tags":["overlay","actions","hover","icon-drawing"],"html":"

\n \n FL\n \n \n \n \n \n \n Filiz Luna\n

","css":"$36","previewVideoUrl":null},"hrefPrefix":"/en/effects","locale":"en"}]]}]],"$L37","$L38",null]}]]}]

Effects tagged #actions

Flux Hover Action Overlay

Popular tags