How to make an animated button
Animated buttons are a nice way to attract readers’ attention and to imply that something interesting will happen when clicked. For example, let’s say you have something as simple as a website link. Why not make it a bit more interesting and create an animated button? It’s actually really easy and everything you need to know is right here. So, grab your coffee and let’s get to it!
Step 1: Preparation
First, the button needs to be designed. For this purpose we selected a circle shaped button. We inserted a call to action copy inside of it. The button needs to be separated from the background for animation.
We used Adobe Photoshop to crop the button to the edges and saved it as btn.png. We used the png format because we just need the circle to be visible and we’ll leave the rest as a transparent background.
Step 2: Upload the button to Edition Digital
Open the edition and navigate to the page where you want to create the animated buttons.
Now, select the Image tool from the left-hand tools panel and click on the work area. A pop-up window will open, that enables you to simply drag and drop files in. However, you can also click on it to open the file explorer so you can also browse for the button image this way. Click Upload files. You’ll see a notification that the image is being uploaded. And once done, the image will appear within the work area in it's original size and ratio.
Step 3: Positioning the image in the work area
The Selection tool should be selected by default. If not, go ahead and select it from the left-hand tools panel. Now select the button image. You’ll see you can drag it around the work area. Drag and release it on the spot you want it to be placed. You can change the image’s position and size in the Properties panel, if you prefer to work with exact numbers. You might want to use the zoom function so you can position the images more accurately. At the maximum zoom level you can move images by 1 pixel increments.
Now we’re ready for animation...
Step 4: Animation
Deselect everything by clicking on the work area. In the Animations panel you’ll see an option to add animations after the page opens. By default all elements already have a fade in animation set. We’ll start by making changes to that.
In the Animations panel, click on btn.png between first and second keyframe. You’ll notice the element in the work area will change to a different state. The element also displays a few handles that you can use to animate it. But first, we’ll grab the second keyframe and slightly drag it to the right. By doing this we are extending the duration of this step, which is displayed in the left-hand Step editor section of the Animations panel. Let’s set the duration to one second, which is how long it will take for the button to appear after the page is opened.
Now click on the plus button to add a new step after the last one. This one will be utilised as a short delay because we don’t want the button animation to start right away. Drag the last keyframe to extend the duration to three seconds. We will not make any property changes, because we just want some time to pass before the animation starts. Add another step, but this time change it’s opacity to 50%. You can see the opacity of the button change instantly in the work area.
Add another step and change it’s opacity to 100%.
We’ll finalize the animation by adding a loop.
Step 5: Save and preview
Save your work and preview it in a browser.
If you’re not completely happy with the button animation, go back to the Design tool and play with the timings and opacity settings until you’re happy with it.
Feel free to experiment with other properties and settings, you’ll soon notice that the possibilities for animated buttons are endless.