I find that using an icon is sometimes better than text or emoji in an action button. To my delight, you can use SVG data in CSS which means you can use your favorite icon. Here’s one way to do it:
1. Get the HTML code for the SVG icon
Go to an icons website like icons8.com, find your favorite icon and look for the option to get the HTML code for a SVG embed. If you already have your own svg icon, you can use a website like https://editsvgcode.com/ to get the HTML code for the SVG embed.
2. Generate URL encoded data
Generate the URL encoded data by pasting the HTML code in a website encoder like the following URL-encoder for SVG.
3. Apply it to your CSS
Copy the encoded data and put it in your CSS by doing the following:
content: url("data:image/svg+xml, <ENCODED DATA GOES HERE>");
Here are examples of what you can then do. The first is an easy replacement, while the second is more involved.
Open a weblink
Before: Using an emoji as the name of the button link
Simulate a priority task checklist action button