{"id":40498,"date":"2020-06-24T07:28:59","date_gmt":"2020-06-24T07:28:59","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=40498"},"modified":"2020-06-24T07:28:59","modified_gmt":"2020-06-24T07:28:59","slug":"lottie-animations-download-button","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/","title":{"rendered":"How to Add an Animated Download Button on WordPress"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You may have noticed lately that UI animations are gaining a lot of popularity in the web design domain. Web creators have many options for how to add animations to the websites they build. Personally, our favorite these days is using Lottie animations<\/a>, even though alternative methods such as creating SVG animations, or vector animations using After Effects, are also great.\u00a0<\/p>

In terms of added value for the website visitor or interface user, animations are a great friend of user experience<\/a>. Because user experience thrives on exciting microinteractions and grabbing user attention in a subtle, elegant way, well-crafted animations are a game-changer when it comes to crafting a user-friendly interface.\u00a0<\/p>

If we narrow our discussion one step further, one of the most effective use-cases for animation design is animated buttons. Call to action buttons are often one of the most significant design elements on a page, and if animating them increases their clickability, then they’re definitely something we’ll want to pursue.<\/p>

In this post, we are going to dive into how to use the Lottie widget to create an animated button on your Elementor site.<\/p>

<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tDiscover How To Create an Animated Emblem Logo With Elementor<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

1. Get Started With Lottie Widget\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lottie\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The first thing you’ll do is search for \u2018Lottie’, and drag it to where you want it on the page.\u00a0<\/p>

Let’s choose the source. You have two options for how to do this, both in the widget’s Content tab:<\/p>

  1. Use an external URL by simply copying an online Lottie Animation link and pasting it in the field<\/li>
  2. Set the source to Media File, and upload your own Lottie Animations*<\/li><\/ol>

    *In this post, we’ll go through the process of uploading a Lottie file.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    2. Choose Your Lottie Button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lottie\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    The first thing we make sure to do is choose a button from the LottieFiles library that you like and if you want to, customize the button in the Lottie Editor.<\/span><\/p>

    Once you\u2019ve customized the button, you\u2019ll download it as a Lottie JSON file.\u00a0<\/span><\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    3. Upload Your Lottie JSON File\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"upload\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Then, back in the Lottie widget click the media icon to upload the Lottie JSON file.\u00a0<\/p>

    Simply drag it in to upload, then insert it into your page.\u00a0<\/p>

    Once it\u2019s inserted, you can choose its alignment and turn it into a real button by setting its link to Custom URL. This link will automatically download your free eBook when the button gets clicked. We\u2019ll get to it soon.<\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    3. Choose Your Animation Preferences\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lottie\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Let\u2019s first make sure the animation plays according to our preference.\u00a0<\/p>

    Set the trigger to \u201cOn Click\u201d, so the animation starts playing upon clicking the Lottie button. Also, set it to loop, so it continues playing.\u00a0<\/p>

    In order for it to stop around the same time the download is complete, set it to only loop 3 times. This way the viewer has enough time to enjoy the playful animation, while downloading the free ebook.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    4. Style Your Button<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Next, you\u2019ll go to the Style tab, where you can adjust the sizing of the button, along with your usual styling options. Increase the button\u2019s width so that it fits nicely on the page and looks like a real button.<\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    6. Upload Your eBook File\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"lottie\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Time to upload the eBook to our Media Library.. You can click on any image to enter it.\u00a0<\/p>

    Go to upload files and select the ebook to upload, then copy the eBook link from the attachment details, and close the Media Library. We will use this link in our final step, to make sure the button automatically downloads the free eBook.<\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    7. Create Your Direct Download Link<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Lastly, back in the Lottie widget, it\u2019s time to paste the eBook link in the custom URL field and turn it into a direct download link.<\/span><\/p>

    To do that, click on \u201cLink Options\u201d and add this custom attribute: <\/span>download = “true\u201d.<\/b><\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"add\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Enjoy Your Animation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Congratulations, you officially know how to use the Lottie Widget as a button and set it to play an animation and download a free E-Book at the same time.\u00a0<\/p>

    Once you\u2019ve added your Lottie animations to your site, your website, and especially your buttons, will only thank you. And more than that, they\u2019ll reward you with great user engagement results.<\/p>

    Do you want to see other Lottie tutorials?<\/p>

    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t

    Click here to see other Lottie tutorials<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

    This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button and set it to play an animation and download a free eBook upon clicking it.<\/p>\n","protected":false},"author":129304,"featured_media":40525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[44,32],"tags":[81,173],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-40498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","category-design","tag-create","tag-video"],"acf":[],"yoast_head":"\nHow to Add an Animated Download Button on WordPress<\/title>\n<meta name=\"description\" content=\"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add an Animated Download Button on WordPress\" \/>\n<meta property=\"og:description\" content=\"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-24T07:28:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ziv Geurts\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ziv Geurts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\"},\"author\":{\"name\":\"Ziv Geurts\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/10722d27f3d91ed35672dcc7d1c77630\"},\"headline\":\"How to Add an Animated Download Button on WordPress\",\"datePublished\":\"2020-06-24T07:28:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\"},\"wordCount\":736,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png\",\"keywords\":[\"Create\",\"Video\"],\"articleSection\":[\"Elementor\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\",\"url\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\",\"name\":\"How to Add an Animated Download Button on WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png\",\"datePublished\":\"2020-06-24T07:28:59+00:00\",\"description\":\"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png\",\"width\":1201,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add an Animated Download Button on WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/10722d27f3d91ed35672dcc7d1c77630\",\"name\":\"Ziv Geurts\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f75ea241940a52d90b106e650fd40f81b6154218b523c3b0aeef2d79e77ad63b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f75ea241940a52d90b106e650fd40f81b6154218b523c3b0aeef2d79e77ad63b?s=96&d=mm&r=g\",\"caption\":\"Ziv Geurts\"},\"description\":\"Ziv Geurts is a Sr. Content Manager at Elementor, shaping product and brand storytelling across launches, campaigns, and video initiatives.. With a background in web design and product marketing, he turns complex ideas into clear, compelling content for web creators. Outside of work, Ziv is a proud husband and father of three who loves playing piano, training with kettlebells, and hitting the mountain biking trails.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/ziv-geurts\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add an Animated Download Button on WordPress","description":"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/","og_locale":"en_US","og_type":"article","og_title":"How to Add an Animated Download Button on WordPress","og_description":"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.","og_url":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-06-24T07:28:59+00:00","og_image":[{"width":1201,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png","type":"image\/png"}],"author":"Ziv Geurts","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ziv Geurts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/"},"author":{"name":"Ziv Geurts","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/10722d27f3d91ed35672dcc7d1c77630"},"headline":"How to Add an Animated Download Button on WordPress","datePublished":"2020-06-24T07:28:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/"},"wordCount":736,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png","keywords":["Create","Video"],"articleSection":["Elementor","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/","url":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/","name":"How to Add an Animated Download Button on WordPress","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png","datePublished":"2020-06-24T07:28:59+00:00","description":"This guide to Lottie Animations will show you a creative way to use the Lottie widget as a button on your Elementor site.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/lottie-animations-download-button\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/06\/Create-Animated-Buttons-on-Your-Website_external.png","width":1201,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/lottie-animations-download-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Add an Animated Download Button on WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/10722d27f3d91ed35672dcc7d1c77630","name":"Ziv Geurts","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f75ea241940a52d90b106e650fd40f81b6154218b523c3b0aeef2d79e77ad63b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f75ea241940a52d90b106e650fd40f81b6154218b523c3b0aeef2d79e77ad63b?s=96&d=mm&r=g","caption":"Ziv Geurts"},"description":"Ziv Geurts is a Sr. Content Manager at Elementor, shaping product and brand storytelling across launches, campaigns, and video initiatives.. With a background in web design and product marketing, he turns complex ideas into clear, compelling content for web creators. Outside of work, Ziv is a proud husband and father of three who loves playing piano, training with kettlebells, and hitting the mountain biking trails.","url":"https:\/\/elementor.com\/blog\/author\/ziv-geurts\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/40498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/129304"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=40498"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/40498\/revisions"}],"predecessor-version":[{"id":93742,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/40498\/revisions\/93742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/40525"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=40498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=40498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=40498"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=40498"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=40498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}