Tips: Creating Animated Buttons in AppSheet

AppSheet Tips & Tricks
,
1

​Hello everyone! This time, I would like to share a complete guide on how to create dynamic and aesthetic animated buttons in AppSheet using the Button Maker tool.

​Step 1: Tool Preparation

​First, make sure to access or install Button Maker for AppSheet via this community link:

:backhand_index_pointing_right: Button Maker Discussion & Link

​Step 2: Designing the Button (Base Design)

​To get the best visual results with rich effects, follow this setup sequence:

  1. ​Choose Type: In the main menu, select Non-Flat Design. This option unlocks premium features like shadows, glows, and 3-color gradients..

    20260518_062303
    20260518_062303575×1280 71.9 KB

  2. ​Adjust Size (Shape): Set the width, height and RX (rounded) of the button to match your application layout needs.

    20260518_063021
    20260518_063021575×1280 103 KB

  3. ​Customize Text: Enter your button text or label in the text menu (e.g., Get Started).

    20260518_062339
    20260518_062339575×1280 125 KB

  4. ​Mix Colors (Gradient): Select the Gradient menu. Here, you can blend up to 3 colors. Adjust the rotation to get the perfect color angle.

    20260518_063034
    20260518_063034575×1280 113 KB

​Step 3: Applying Animation & Copying the Code

​Once your base button looks solid, it is time to bring it to life with animation:

  1. ​Select Animation: There are 9 ready-to-use animation templates. Choose the one that best fits your app theme (e.g., Animasi_6).

    20260518_063225
    20260518_063225575×1280 69.8 KB

  2. ​Copy SVG Code: Click the green Salin Kode Animasi action button. Select the entire code and copy it.

    20260518_063500
    20260518_063500575×1280 78.7 KB

  3. ​Validate & Convert:

​Step 4: Implementation in AppSheet Editor

​The final step is integrating the button into your AppSheet editor:

  1. ​Open your AppSheet Editor and create a new column (add virtual column) for your button.

  2. Create a Virtual Column
    Create a new Virtual Column (as LONG TEXT : HTML) and use the following formula structure

    CONCATENATE('<a href="your link page" target="_blank"><img src="base64" width="120"></a>')

      • ​Replace base64: Paste the copied code from the SVG viewer into the base64 text (replace).

      • ​Replace your link page: Change your link page to match the destination page you want to direct users to.

        20260518_062550
        20260518_0625501280×575 139 KB

      • ​Adjust Width: Change the width=“120” value to match the original width layout of your button design.

Step 5: Setting up the View Layout

​To display your newly created animated button inside the app interface:

  1. ​Go to the UX menu in the AppSheet editor and select Views.

  2. ​Select your data table that contains the button virtual column.

  3. ​Choose detail as the View type.

    20260518_065403
    20260518_065403575×1280 78 KB

  4. ​Set the Position to place the view exactly where you want it to appear in your app navigation.​

    20260518_065535
    20260518_0655351093×1280 101 KB

​:link: Live Demo / Sample Result

​To see a live example of this implementation and see how the button works directly inside the application, you can check the following link:

20260518_065654
20260518_065654830×1280 96.3 KB

Good luck trying it out, hope it works perfectly! If you face any issues while trying this method, feel free to discuss it in the comments. Let’s make AppSheet UIs look premium

SVG CODE sample :

<svg xmlns="" width="540" height="105" viewBox="0 0 540 105"><defs><filter id="fShadow" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="5" dy="5" stdDeviation="6" flood-color="Purple" flood-opacity="0.8"/></filter><filter id="fGlow" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="0" dy="0" stdDeviation="7" flood-color="URL(#gStroke)" flood-opacity="0.9"/></filter><linearGradient id="gS"><stop offset="0%" stop-color="Navy"/><stop offset="50%" stop-color="DeepSkyBlue"/><stop offset="100%" stop-color="HotPink"/><animateTransform attributeName="gradientTransform" type="rotate" from="0 0.5 0.5" to="360 0.5 0.5" dur="3s" repeatCount="indefinite"/></linearGradient><clipPath id="c"><rect x="20" y="20" width="500" height="65" rx="15"/></clipPath></defs><g filter="url(#fShadow)"><rect x="20" y="20" width="500" height="65" rx="15" fill="url(#gS)" stroke="URL(#gStroke)" stroke-width="3" filter="url(#fGlow)"/></g><g clip-path="url(#c)"><text x="270" dominant-baseline="middle" text-anchor="middle" fill="White" font-family="VERDANA" font-size="30" font-weight="bold"><animate attributeName="y" from="105" to="-20" dur="4s" repeatCount="indefinite"/>APPROVE ✅</text></g></svg>
2 Likes