Getting started

What is Micro-Interactions V-0.2?

Micro-Interactions offers a set of ready-to-use & customisable components created for Webflow. Our aim is to streamline the development process and save you time. Just copy the interaction component and effortlessly paste it into your Webflow projects.

Things you need to know

Each component card comes with specific labels, making it easy for you to know what it is at a glance.

It's a micro interaction component that will be copied.

Copy
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"dc328dbf-4fa2-8616-f029-9fc7e218cdac","type":"Link","tag":"a","classes":["c2293013-a4da-2791-a253-e2b610ed4d78"],"children":["7647cdca-2dca-f8ea-29ff-8094c88ab91d","dc328dbf-4fa2-8616-f029-9fc7e218cdaf"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"7647cdca-2dca-f8ea-29ff-8094c88ab91d","type":"Block","tag":"div","classes":["af3c3d16-7236-190b-a878-571239364aa8"],"children":["0364183a-a18e-cd52-ae3c-7a21ce40d79f","dc328dbf-4fa2-8616-f029-9fc7e218cdad","b2f0c44a-2971-bb46-004c-e06f29617514"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0364183a-a18e-cd52-ae3c-7a21ce40d79f","type":"Block","tag":"div","classes":["f694e655-ac5d-daaa-6044-2bed5602172d"],"children":["0364183a-a18e-cd52-ae3c-7a21ce40d7a0"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0364183a-a18e-cd52-ae3c-7a21ce40d7a0","text":true,"v":"Get in touch"},{"_id":"dc328dbf-4fa2-8616-f029-9fc7e218cdad","type":"Block","tag":"div","classes":["f694e655-ac5d-daaa-6044-2bed5602172d","8f92d47e-ab5d-7e68-48a5-28d089c50f0d"],"children":["dc328dbf-4fa2-8616-f029-9fc7e218cdae"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"dc328dbf-4fa2-8616-f029-9fc7e218cdae","text":true,"v":"Get in touch"},{"_id":"b2f0c44a-2971-bb46-004c-e06f29617514","type":"Block","tag":"div","classes":["3c0f90f5-0c09-790c-6db0-dcf3b28a31fe"],"children":[],"data":{"tag":"div","text":false}},{"_id":"dc328dbf-4fa2-8616-f029-9fc7e218cdaf","type":"Block","tag":"div","classes":["bf35fa3f-10e9-1c63-5cf6-32b8ed4aeb87"],"children":["dc328dbf-4fa2-8616-f029-9fc7e218cdb0","1d7151af-a650-4128-50a6-d19b6de951c5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"dc328dbf-4fa2-8616-f029-9fc7e218cdb0","type":"HtmlEmbed","tag":"div","classes":["5845479e-74d0-338e-d59d-054b57cf5bcc"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"1d7151af-a650-4128-50a6-d19b6de951c5","type":"HtmlEmbed","tag":"div","classes":["5845479e-74d0-338e-d59d-054b57cf5bcc","2d666f4d-b540-16ab-972d-224f5d586416"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}}],"styles":[{"_id":"c2293013-a4da-2791-a253-e2b610ed4d78","fake":false,"type":"class","name":"button-block-18","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; justify-content: flex-start; align-items: center; color: hsla(0, 0.00%, 94.00%, 1.00); text-decoration: none;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"af3c3d16-7236-190b-a878-571239364aa8","fake":false,"type":"class","name":"button-text-wrap-18","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; padding-top: 0.75rem; padding-right: 2rem; padding-bottom: 0.75rem; padding-left: 2rem; flex-direction: column; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 94.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 94.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 94.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 94.00%, 1.00); border-top-left-radius: 100vw; border-top-right-radius: 100vw; border-bottom-left-radius: 100vw; border-bottom-right-radius: 100vw;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"f694e655-ac5d-daaa-6044-2bed5602172d","fake":false,"type":"class","name":"button-text-18","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; justify-content: flex-start; font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{"tiny":{"styleLess":"font-size: 0.875rem;"}},"children":["8f92d47e-ab5d-7e68-48a5-28d089c50f0d"],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"8f92d47e-ab5d-7e68-48a5-28d089c50f0d","fake":false,"type":"class","name":"is-absolute","namespace":"","comb":"&","styleLess":"position: absolute;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"3c0f90f5-0c09-790c-6db0-dcf3b28a31fe","fake":false,"type":"class","name":"button-overlay-18","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: auto; right: 0%; bottom: 0%; width: 100%; height: 0%; background-color: hsla(0, 0.00%, 94.00%, 0.05);","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"bf35fa3f-10e9-1c63-5cf6-32b8ed4aeb87","fake":false,"type":"class","name":"button-icon-wrap-18","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; overflow: hidden; padding-top: 0.75rem; padding-right: 0.75rem; padding-bottom: 0.75rem; padding-left: 0.75rem; flex-direction: column; justify-content: center; align-items: center; border-top-left-radius: 100vw; border-top-right-radius: 100vw; border-bottom-left-radius: 100vw; border-bottom-right-radius: 100vw; background-color: hsla(59.23076923076923, 100.00%, 69.41%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"5845479e-74d0-338e-d59d-054b57cf5bcc","fake":false,"type":"class","name":"button-text-18-icon","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; transform: rotate(0deg); font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{},"children":["2d666f4d-b540-16ab-972d-224f5d586416"],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"2d666f4d-b540-16ab-972d-224f5d586416","fake":false,"type":"class","name":"is-absolute","namespace":"","comb":"&","styleLess":"position: absolute;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-81","interactionTypeId":"MOUSE_HOVER_INTERACTION","eventIds":["e-148","e-149"],"target":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdac","createdOn":1695834838407}],"events":[{"id":"e-148","name":"","animationType":"custom","eventTypeId":"MOUSE_OVER","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-55","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-149"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdac","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdac","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1695834838409},{"id":"e-149","name":"","animationType":"custom","eventTypeId":"MOUSE_OUT","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-56","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-148"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdac","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdac","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1695834838411}],"actionLists":[{"id":"a-55","title":"👆 Button Hover In - 18","actionItemGroups":[{"actionItems":[{"id":"a-55-n","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|0364183a-a18e-cd52-ae3c-7a21ce40d79f","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":0,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-55-n-10","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|b2f0c44a-2971-bb46-004c-e06f29617514","appliesTo":"ELEMENT_CLASS","styleBlockIds":["3c0f90f5-0c09-790c-6db0-dcf3b28a31fe"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":0,"widthUnit":"px","heightUnit":"px","locked":false},"instant":false},{"id":"a-55-n-3","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdad","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d","8f92d47e-ab5d-7e68-48a5-28d089c50f0d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":180,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-55-n-5","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdb0","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":0,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false},{"id":"a-55-n-7","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|1d7151af-a650-4128-50a6-d19b6de951c5","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc","2d666f4d-b540-16ab-972d-224f5d586416"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":-250,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false}]},{"actionItems":[{"id":"a-55-n-2","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|0364183a-a18e-cd52-ae3c-7a21ce40d79f","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":-180,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-55-n-4","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdad","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d","8f92d47e-ab5d-7e68-48a5-28d089c50f0d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":0,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-55-n-8","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdb0","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":250,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false},{"id":"a-55-n-9","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|1d7151af-a650-4128-50a6-d19b6de951c5","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc","2d666f4d-b540-16ab-972d-224f5d586416"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":0,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false},{"id":"a-55-n-11","actionTypeId":"STYLE_SIZE","config":{"delay":100,"easing":"outQuart","duration":300,"target":{"nodeId":"64ab4ca244ef51560939382f|b2f0c44a-2971-bb46-004c-e06f29617514","appliesTo":"ELEMENT_CLASS","styleBlockIds":["3c0f90f5-0c09-790c-6db0-dcf3b28a31fe"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":100,"heightValue":100,"widthUnit":"%","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1686447115400},{"id":"a-56","title":"👆 Button Hover Out - 18","actionItemGroups":[{"actionItems":[{"id":"a-56-n","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|0364183a-a18e-cd52-ae3c-7a21ce40d79f","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":0,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-56-n-2","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdad","appliesTo":"ELEMENT_CLASS","styleBlockIds":["f694e655-ac5d-daaa-6044-2bed5602172d","8f92d47e-ab5d-7e68-48a5-28d089c50f0d"],"useEventTarget":"CHILDREN","boundaryMode":false},"yValue":180,"xUnit":"PX","yUnit":"%","zUnit":"PX"},"instant":false},{"id":"a-56-n-3","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|dc328dbf-4fa2-8616-f029-9fc7e218cdb0","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":0,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false},{"id":"a-56-n-4","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|1d7151af-a650-4128-50a6-d19b6de951c5","appliesTo":"ELEMENT_CLASS","styleBlockIds":["5845479e-74d0-338e-d59d-054b57cf5bcc","2d666f4d-b540-16ab-972d-224f5d586416"],"useEventTarget":"CHILDREN","boundaryMode":false},"xValue":-250,"xUnit":"%","yUnit":"PX","zUnit":"PX"},"instant":false},{"id":"a-56-n-5","actionTypeId":"STYLE_SIZE","config":{"delay":100,"easing":"outQuart","duration":300,"target":{"nodeId":"64ab4ca244ef51560939382f|b2f0c44a-2971-bb46-004c-e06f29617514","appliesTo":"ELEMENT_CLASS","styleBlockIds":["3c0f90f5-0c09-790c-6db0-dcf3b28a31fe"],"useEventTarget":"CHILDREN","boundaryMode":false},"widthValue":1005,"heightValue":0,"widthUnit":"px","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1686447115400}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

A button that will copy the component upon click.

How it works

The Micro-Interactions library uses Webflow's built-in interactions, making it simple to copy &paste components into your different projects.

See it in action
Copy as Link
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29f5","type":"Link","tag":"a","classes":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"children":["951430cf-5ae8-edef-5dcf-6fed32fc29f6","951430cf-5ae8-edef-5dcf-6fed32fc29f8","951430cf-5ae8-edef-5dcf-6fed32fc29fa"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29f6","type":"Block","tag":"div","classes":["88caba8b-4d62-9264-7590-c9e9184249e8"],"children":["951430cf-5ae8-edef-5dcf-6fed32fc29f7"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29f7","text":true,"v":"Preview in browser"},{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29f8","type":"Block","tag":"div","classes":["1cfa6434-5e41-26c5-0111-e9168203764c"],"children":["951430cf-5ae8-edef-5dcf-6fed32fc29f9"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29f9","type":"HtmlEmbed","tag":"div","classes":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"951430cf-5ae8-edef-5dcf-6fed32fc29fa","type":"Block","tag":"div","classes":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"children":[],"data":{"text":false,"tag":"div"}}],"styles":[{"_id":"2d1c69b7-e6d8-4075-6443-d32c761ba624","fake":false,"type":"class","name":"button-block-16","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; justify-content: center; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 94.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 94.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 94.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 94.00%, 1.00); border-top-left-radius: 100vw; border-top-right-radius: 100vw; border-bottom-left-radius: 100vw; border-bottom-right-radius: 100vw; color: hsla(0, 0.00%, 94.00%, 1.00); text-decoration: none;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"88caba8b-4d62-9264-7590-c9e9184249e8","fake":false,"type":"class","name":"button-text-16","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; justify-content: flex-start; font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{"tiny":{"styleLess":"font-size: 0.875rem;"}},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1cfa6434-5e41-26c5-0111-e9168203764c","fake":false,"type":"class","name":"button-icon-wrap-16","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; overflow: hidden; flex-direction: column; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1b1bda8e-9715-b787-3326-889dcaf589e8","fake":false,"type":"class","name":"button-text-16-icon","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; transform: rotate(0deg); font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1e41a3e6-336b-fad6-5d55-8a42ccc0758d","fake":false,"type":"class","name":"button-hover-box-16","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: auto; right: 0%; bottom: 0%; height: 0%; background-color: hsla(59.23076923076923, 100.00%, 69.41%, 1.00);","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-49","interactionTypeId":"MOUSE_MOVE_INTERACTION","eventIds":["e-88"],"target":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","createdOn":1693151205379},{"id":"i-50","interactionTypeId":"MOUSE_HOVER_INTERACTION","eventIds":["e-89","e-90"],"target":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","createdOn":1693151205379}],"events":[{"id":"e-88","name":"","animationType":"preset","eventTypeId":"MOUSE_MOVE","action":{"id":"","actionTypeId":"GENERAL_CONTINUOUS_ACTION","instant":true,"config":{"actionListId":"a-34","affectedElements":{}}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":[{"continuousParameterGroupId":"a-34-p","selectedAxis":"X_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":80,"restingState":50},{"continuousParameterGroupId":"a-34-p-2","selectedAxis":"Y_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":50,"restingState":50}],"createdOn":1693151205379},{"id":"e-89","name":"","animationType":"preset","eventTypeId":"MOUSE_OVER","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-32","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-90"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1693151205379},{"id":"e-90","name":"","animationType":"preset","eventTypeId":"MOUSE_OUT","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-33","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-89"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1693151205379}],"actionLists":[{"id":"a-34","title":"Arrow-Diagonal-16-hoVER","continuousParameterGroups":[{"id":"a-34-p","type":"MOUSE_X","parameterLabel":"Mouse X","continuousActionGroups":[{"keyframe":0,"actionItems":[{"id":"a-34-n","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"xValue":-20,"xUnit":"px","yUnit":"PX","zUnit":"PX"},"instant":false}]},{"keyframe":100,"actionItems":[{"id":"a-34-n-2","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"xValue":20,"yValue":null,"xUnit":"px","yUnit":"px","zUnit":"PX"},"instant":false}]}]},{"id":"a-34-p-2","type":"MOUSE_Y","parameterLabel":"Mouse Y","continuousActionGroups":[{"keyframe":0,"actionItems":[{"id":"a-34-n-3","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"yValue":-20,"xUnit":"PX","yUnit":"px","zUnit":"PX"},"instant":false}]},{"keyframe":100,"actionItems":[{"id":"a-34-n-4","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"yValue":20,"xUnit":"PX","yUnit":"px","zUnit":"PX"},"instant":false}]}]}],"createdOn":1691842510450},{"id":"a-32","title":"Arrow-Diagonal--Up-16","actionItemGroups":[{"actionItems":[{"id":"a-32-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-32-n-7","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-32-n-5","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-32-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]},{"actionItems":[{"id":"a-32-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-45,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-32-n-8","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"","rValue":0,"bValue":0,"gValue":0,"aValue":1},"instant":false},{"id":"a-32-n-6","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"","rValue":0,"bValue":0,"gValue":0,"aValue":1},"instant":false},{"id":"a-32-n-4","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":100,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1691842204378},{"id":"a-33","title":"Arrow-Diagonal--Down-16","actionItemGroups":[{"actionItems":[{"id":"a-33-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-33-n-4","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-33-n-3","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-33-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1691842204378}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Copy as Button
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"296b869c-d000-41a3-77e1-5abed7586aa7","type":"DOM","tag":"div","classes":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"children":["224b4910-10b7-57f2-50ab-cc80f96672e2","457825da-c9ba-6218-4462-48f2c2b8eb23","597bd05c-d0a4-8336-a465-100aad1be640"],"data":{"tag":"button","attributes":[]}},{"_id":"224b4910-10b7-57f2-50ab-cc80f96672e2","type":"Block","tag":"div","classes":["88caba8b-4d62-9264-7590-c9e9184249e8"],"children":["224b4910-10b7-57f2-50ab-cc80f96672e3"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"224b4910-10b7-57f2-50ab-cc80f96672e3","text":true,"v":"Preview in browser"},{"_id":"457825da-c9ba-6218-4462-48f2c2b8eb23","type":"Block","tag":"div","classes":["1cfa6434-5e41-26c5-0111-e9168203764c"],"children":["457825da-c9ba-6218-4462-48f2c2b8eb24"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"457825da-c9ba-6218-4462-48f2c2b8eb24","type":"HtmlEmbed","tag":"div","classes":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d=\"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\" fill=\"currentColor\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false}}}},{"_id":"597bd05c-d0a4-8336-a465-100aad1be640","type":"Block","tag":"div","classes":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"children":[],"data":{"text":false,"tag":"div"}}],"styles":[{"_id":"2d1c69b7-e6d8-4075-6443-d32c761ba624","fake":false,"type":"class","name":"button-block-16","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1rem; padding-left: 2rem; justify-content: center; align-items: center; grid-column-gap: 1rem; grid-row-gap: 1rem; border-top-style: solid; border-top-width: 1px; border-top-color: #f0f0f0; border-right-style: solid; border-right-width: 1px; border-right-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #f0f0f0; border-left-style: solid; border-left-width: 1px; border-left-color: #f0f0f0; border-top-left-radius: 100vw; border-top-right-radius: 100vw; border-bottom-left-radius: 100vw; border-bottom-right-radius: 100vw; background-color: hsla(0, 0.00%, 94.12%, 0.00); color: #f0f0f0; text-decoration: none;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"88caba8b-4d62-9264-7590-c9e9184249e8","fake":false,"type":"class","name":"button-text-16","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; justify-content: flex-start; font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{"tiny":{"styleLess":"font-size: 0.875rem;"}},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1cfa6434-5e41-26c5-0111-e9168203764c","fake":false,"type":"class","name":"button-icon-wrap-16","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; display: flex; overflow: hidden; flex-direction: column; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1b1bda8e-9715-b787-3326-889dcaf589e8","fake":false,"type":"class","name":"button-text-16-icon","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; transform: rotate(0deg); font-family: Instrumentsans Medium; font-size: 1rem; font-weight: 500;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null},{"_id":"1e41a3e6-336b-fad6-5d55-8a42ccc0758d","fake":false,"type":"class","name":"button-hover-box-16","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: auto; right: 0%; bottom: 0%; height: 0%; background-color: #fffd63;","variants":{},"children":[],"createdBy":"610934a6535de1cede317cfd","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-406","interactionTypeId":"MOUSE_HOVER_INTERACTION","eventIds":["e-793","e-794"],"target":"65253bf8822bf3f73eb7369a|296b869c-d000-41a3-77e1-5abed7586aa7","createdOn":1697914616152},{"id":"i-407","interactionTypeId":"MOUSE_MOVE_INTERACTION","eventIds":["e-795"],"target":"65253bf8822bf3f73eb7369a|296b869c-d000-41a3-77e1-5abed7586aa7","createdOn":1697914630460}],"events":[{"id":"e-793","name":"","animationType":"custom","eventTypeId":"MOUSE_OVER","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","config":{"delay":0,"easing":"","duration":0,"actionListId":"a-32","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-794"},"instant":true},"mediaQueries":["main","medium","small","tiny"],"target":{"appliesTo":"ELEMENT","styleBlockIds":[],"id":"65253bf8822bf3f73eb7369a|296b869c-d000-41a3-77e1-5abed7586aa7"},"targets":[],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1697914616158},{"id":"e-794","name":"","animationType":"custom","eventTypeId":"MOUSE_OUT","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","config":{"delay":0,"easing":"","duration":0,"actionListId":"a-33","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-793"},"instant":true},"mediaQueries":["main","medium","small","tiny"],"target":{"appliesTo":"ELEMENT","styleBlockIds":[],"id":"65253bf8822bf3f73eb7369a|296b869c-d000-41a3-77e1-5abed7586aa7"},"targets":[],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1697914616165},{"id":"e-795","name":"","animationType":"custom","eventTypeId":"MOUSE_MOVE","action":{"id":"","actionTypeId":"GENERAL_CONTINUOUS_ACTION","config":{"actionListId":"a-34","affectedElements":{}},"instant":true},"mediaQueries":["main","medium","small","tiny"],"target":{"appliesTo":"ELEMENT","styleBlockIds":[],"id":"65253bf8822bf3f73eb7369a|296b869c-d000-41a3-77e1-5abed7586aa7"},"targets":[],"config":[{"continuousParameterGroupId":"a-34-p","selectedAxis":"X_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":70,"restingState":50},{"continuousParameterGroupId":"a-34-p-2","selectedAxis":"Y_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":70,"restingState":50}],"createdOn":1697914630469}],"actionLists":[{"id":"a-32","title":"Arrow-Diagonal--Up-16","actionItemGroups":[{"actionItems":[{"id":"a-32-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-32-n-7","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-32-n-5","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-32-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]},{"actionItems":[{"id":"a-32-n-3","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":-45,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-32-n-8","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"","rValue":0,"bValue":0,"gValue":0,"aValue":1},"instant":false},{"id":"a-32-n-6","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"","rValue":0,"bValue":0,"gValue":0,"aValue":1},"instant":false},{"id":"a-32-n-4","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":100,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":true,"createdOn":1691842204378},{"id":"a-33","title":"Arrow-Diagonal--Down-16","actionItemGroups":[{"actionItems":[{"id":"a-33-n","actionTypeId":"TRANSFORM_ROTATE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab81","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1cfa6434-5e41-26c5-0111-e9168203764c"],"useEventTarget":"CHILDREN","boundaryMode":false},"zValue":0,"xUnit":"DEG","yUnit":"DEG","zUnit":"deg"},"instant":false},{"id":"a-33-n-4","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f9","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1b1bda8e-9715-b787-3326-889dcaf589e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-33-n-3","actionTypeId":"STYLE_TEXT_COLOR","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ab4ca244ef51560939382f|951430cf-5ae8-edef-5dcf-6fed32fc29f6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["88caba8b-4d62-9264-7590-c9e9184249e8"],"useEventTarget":"CHILDREN","boundaryMode":false},"globalSwatchId":"6c749a9f","rValue":240,"bValue":240,"gValue":240,"aValue":1},"instant":false},{"id":"a-33-n-2","actionTypeId":"STYLE_SIZE","config":{"delay":0,"easing":"outQuart","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|1cf39a9a-9ff2-517b-b61c-fd876d661af8","appliesTo":"ELEMENT_CLASS","styleBlockIds":["1e41a3e6-336b-fad6-5d55-8a42ccc0758d"],"useEventTarget":"CHILDREN","boundaryMode":false},"heightValue":0,"widthUnit":"PX","heightUnit":"%","locked":false},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1691842204378},{"id":"a-34","title":"Arrow-Diagonal-16-hoVER","continuousParameterGroups":[{"id":"a-34-p","type":"MOUSE_X","parameterLabel":"Mouse X","continuousActionGroups":[{"keyframe":0,"actionItems":[{"id":"a-34-n","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"xValue":-20,"xUnit":"px","yUnit":"PX","zUnit":"PX"},"instant":false}]},{"keyframe":100,"actionItems":[{"id":"a-34-n-2","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"xValue":20,"yValue":null,"xUnit":"px","yUnit":"px","zUnit":"PX"},"instant":false}]}]},{"id":"a-34-p-2","type":"MOUSE_Y","parameterLabel":"Mouse Y","continuousActionGroups":[{"keyframe":0,"actionItems":[{"id":"a-34-n-3","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"yValue":-20,"xUnit":"PX","yUnit":"px","zUnit":"PX"},"instant":false}]},{"keyframe":100,"actionItems":[{"id":"a-34-n-4","actionTypeId":"TRANSFORM_MOVE","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"64ad86d392730c2a06dedfe8|b35d388b-f9f5-9005-b3f8-3e6a960bab7e","appliesTo":"TRIGGER_ELEMENT","styleBlockIds":["2d1c69b7-e6d8-4075-6443-d32c761ba624"],"boundaryMode":false},"yValue":20,"xUnit":"PX","yUnit":"px","zUnit":"PX"},"instant":false}]}]}],"createdOn":1691842510450}]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Hover
component-card
800+ designers and developers are already saving time with Micro Interactions.
Need help?