# Have a button going straight to checkout, but it takes awhile - any suggestions on making it look better? **URL:** \ **Category:** Visual Editor Help\ **Created:** [February 18, 2022, 2:30pm UTC](https://forum.builder.io/t/have-a-button-going-straight-to-checkout-but-it-takes-awhile-any-suggestions-on-making-it-look-better/1795 "2022-02-18T14:30:15Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![Paulo1300](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@Paulo1300](https://forum.builder.io/u/Paulo1300)\ **Post date:** [February 18, 2022, 2:30pm UTC](https://forum.builder.io/t/have-a-button-going-straight-to-checkout-but-it-takes-awhile-any-suggestions-on-making-it-look-better/1795/1 "2022-02-18T14:30:15Z")
**What are you trying to accomplish** I have a “buy now” button that adds an item to cart, adds a discount, and goes straight to checkout… but the process takes awhile. On twitter I have seen people do like a loading animation… or animate the button so the person knows something is happening. If I click on a button in builder, I see options to animate on hover and appearance but nothing post-click. Here is an example of an animation that says “applying your discount” when pressing buy now (press buy now on this page): > **[Obvi's Collagenic Burn | Shop Now](https://myobvi.com/pages/obvi-collagenic)** > > FEATURED IN FEATURED IN Our Bodies NEED Collagen As We Age   As we age, our bodies produce less collagen, which directly causes the effects of aging. Collagen makes up a third of the protein found in the human body, more than any other type of... Here is an example of the button animating when pressing buy now (press buy now on this page): > **[Bundles](https://dorsalbracelets.com/pages/bundles)** > > Our best selling mystery bundles. Are there any suggestions of how I can do either of those in builder? I don’t want people to think the button doesn’t work and bounce while its loading. **Builder content link** > **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/c1e4ac68c237458bad5dfe4147eac794)** > > Build and optimize digital experiences for any tech stack, visually. **Builder public api key** 89c5670ffd3b4792b9d65197ddea3436 **Code stack you are integrating Builder with** Shopify ---
**Author:** ![maddy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/maddy/32/11_2.png) [@maddy](https://forum.builder.io/u/maddy)\ **Post date:** [February 18, 2022, 9:29pm UTC](https://forum.builder.io/t/have-a-button-going-straight-to-checkout-but-it-takes-awhile-any-suggestions-on-making-it-look-better/1795/2 "2022-02-18T21:29:32Z")
Hi @Paulo1300! If you want to add a loading animation like the examples above, you can add a [click action](https://www.builder.io/c/docs/guides/state-and-actions) to your button in the data tab in the Element events section by selecting “+ new event”, `e.g. state.isLoading = true;`. ![Screen Shot 2022-02-18 at 4.09.56 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/48dd05a34da64f2604f96cc0194aa160719a4169.png) Next, you can add a new binding to your button in the data tab in the Element data bindings section. You’ll want to select Get `text` and add `state.isLoading ? 'Adding...' : 'Add to cart'` as the binding. ![Screen Shot 2022-02-18 at 4.12.21 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3d7c32ed80d04d7a0fb1cb3124aac9503fb3b9b3.png) This will be the outcome: ![Feb-18-2022 16-14-15](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/ff86d1ab58ff8edb77859345b0c9ba4edaf8da90.gif) If you wanted to create a loading animation similar to the first example you gave, you can follow similar steps as above by giving your button a click action, `e.g. state.isLoading = true;`. Instead of adding a binding to change the button’s text, you can build out your “adding…” content inside of the product box (e.g. “Adding to cart…” text and a loading icon). You can give this content position absolute and a z-index in the CSS properties section of the styles tab so it sits on top of your product box content. Lastly, you can go to the data tab and add a new binding of `Show if state.isLoading`. This will be the outcome: ![Feb-18-2022 16-25-35](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/ef04f037478f13cf7726ca38e2729f3e4d29d4b0.gif) Let me know if you have any additional questions! ---
**Author:** ![Paulo1300](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@Paulo1300](https://forum.builder.io/u/Paulo1300)\ **Post date:** [March 9, 2022, 7:00pm UTC](https://forum.builder.io/t/have-a-button-going-straight-to-checkout-but-it-takes-awhile-any-suggestions-on-making-it-look-better/1795/3 "2022-03-09T19:00:33Z")
Thank you! I havent tried this yet but I will