Hello everyone! As usual, I’d like to share some SVG code from Gemini AI, but this time it’s something different: a BUTTON MAKER application.
With this app, you can create buttons for AppSheet instantly. The concept is inspired by “Buy One Get One,” but here it’s “Make One, Get Nine”—one single design generates nine different variations.
The application consists of three main sections: Flat Design, Non-Flat Design, and Animation.
Key Features:
-
Custom Shapes: Adjust the button’s width, height, and corner radius (RX).
-
Typography: Customize the font type, size, and color.
-
Advanced Styling: The Non-Flat section is even more robust, allowing you to add gradients, shadows, and glow effects.
-
Animations: Choose from 9 different animation templates that automatically adapt to the button design you’ve created.
Link app mobile : BUTTON MAKER for APPSHEET
To copy the code for the Hyperlink Button, select the green action(SALIN KODE …), then copy the code. After that, click the go to SVG viewer action to convert the SVG into base64 format.
go to SVG viewer action to convert the SVG into base64 format.
To copy the code for the Hyperlink Button from Effect. (SALIN KODE SVG effect) go to SVG viewer action to convert the SVG into base64 format.
Steps to Create an SVG Action Button in AppSheet
1. Create a Virtual Column
Create a new Virtual Column (as LONG TEXT : HTML) and use the following formula struc
'<a href="your link page" target="_blank"><img src="base64" width="120"></a>'
For width adjust it to the size of your button.
2. Convert SVG Code
Copy your SVG button code and go to “https://www.svgviewer.dev/”
to convert it into a Base64 string.
3. Get the Data URL
Check the preview to ensure your button appears correctly. Then, look for the DATA URL section and select Base64. Copy the resulting code.
4. Update the Formula with Base64
Replace the base64 placeholder in the formula with the Data URL you just copied:
<img src="data:image/svg+xml;base64,your_copied_code_here" width="120">
For width adjust it to the size of your button.
5. Set the Destination Link
Replace your link page with the actual URL or target address you want the button to open:
<a href=“https://your-destination-link.com” target=”_blank">
Get link from BEHAVIOUR
SVG VIEWER (Get the Data URL base 64)
Hopefully this application can make it easier for you to create custom buttons.
