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:
Button Maker Discussion & Link
Step 2: Designing the Button (Base Design)
To get the best visual results with rich effects, follow this setup sequence:
-
Choose Type: In the main menu, select Non-Flat Design. This option unlocks premium features like shadows, glows, and 3-color gradients..
-
Adjust Size (Shape): Set the width, height and RX (rounded) of the button to match your application layout needs.
-
Customize Text: Enter your button text or label in the text menu (e.g., Get Started).
-
Mix Colors (Gradient): Select the Gradient menu. Here, you can blend up to 3 colors. Adjust the rotation to get the perfect color angle.
Step 3: Applying Animation & Copying the Code
Once your base button looks solid, it is time to bring it to life with animation:
-
Select Animation: There are 9 ready-to-use animation templates. Choose the one that best fits your app theme (e.g., Animasi_6).
-
Copy SVG Code: Click the green Salin Kode Animasi action button. Select the entire code and copy it.
-
Validate & Convert:
-
Open the green SVG Viewer action button ( Go to Convert SVG to Data URI - SVG Viewer t) and paste your code there to preview the result.
-
If the visual looks good, go to the Data URL section and choose Base64.
-
Copy the generated Base64 code.
-
Step 4: Implementation in AppSheet Editor
The final step is integrating the button into your AppSheet editor:
-
Open your AppSheet Editor and create a new column (add virtual column) for your button.
-
Create a Virtual Column
Create a new Virtual Column (as LONG TEXT : HTML) and use the following formula structureCONCATENATE('<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.
-
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:
-
Go to the UX menu in the AppSheet editor and select Views.
-
Select your data table that contains the button virtual column.
-
Choose detail as the View type.
-
Set the Position to place the view exactly where you want it to appear in your app navigation.
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:
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>
Approve