Join Now

How To – Sliding Buttons

Design Feature – Sliding Buttons

This article will show you how to create an animated sliding effect for buttons in Adobe Muse using a very simple technique.

DEMO: http://demo.muse-themes.com/design-widget-sliding-buttons/index.html


Step-by-Step Tutorial 

1. To begin, drag a button widget from the Widgets Library panel onto the canvas

Screenshot - Sliding Buttons - Step 1

2. Make the dimensions of your button 410px (w) x 50px (h)

Screenshot - Sliding Buttons - Step 2

3. With the button selected, right click and select "Resize" - “None” from the responsive options in the drop down

Screenshot - Sliding Buttons - Step 3

4. With the button selected, right click again and select “Clear All Styling" from the drop down

Screenshot - Sliding Buttons - Step 4

5. Click inside the button twice over the text box, so that the text of your button is selected

6. Right click the text and select "Resize" - “None" from the responsive options in the drop down

Screenshot - Sliding Buttons - Step 6

7. With the button text selected, go to the top Tool Bar and select Pin to Page: “Left”

Screenshot - Sliding Buttons - Step 7

8. With the overall button selected, give the button a white 1px stroke under the Stroke options panel in the top tool bar

Screenshot - Sliding Buttons - Step 8

9. With the overall button selected, give the button an image fill under the Fill options panel in the top tool bar - Add Image "btn-sprite.png" in the Starter File Assets folder 

Screenshot - Sliding Buttons - Step 9

10. In the same Fill options panel in the top tool bar, set the image position to “Top-Left"

Screenshot - Sliding Buttons - Step 10

11. With the button selected, open the States panel

12. With the “Normal" state selected, turn on “Transition: Fade" – set Duration to 0.3s 

Screenshot - Sliding Buttons - Step 10

13. Select the “Rollover" state in the States panel and change the position of the background image fill to “Top-Right" in the Fill options panel

Screenshot - Sliding Buttons - Step 13

14. Click inside the button twice over the text box so that your button text is selected

15. Change the color of the text in the button to something that will show up on a white background (I chose gray)

Screenshot - Sliding Buttons - Step 15

16. Preview in browser – your screen should look something like the image below and you should see the background animate to the left when hovering

Screenshot - Sliding Buttons - Step 16

17. Right click your button and select "Lock" (we will be putting another button on top and don’t want this button pulling our second button inside of it)

Screenshot - Sliding Buttons - Step 17

18. Drag another button widget from the Widgets Library panel onto your canvas

Screenshot - Sliding Buttons - Step 18

19. Make the dimensions of your button 205px (w) x 50px (h)

Screenshot - Sliding Buttons - Step 19

20. With the button you’ve created selected, right click and under Resize, select “None” from the responsive options in the drop down

Screenshot - Sliding Buttons - Step 20

21. With the button selected, right click again and select “Clear All Styling" from the drop down

Screenshot - Sliding Buttons - Step 22

22. Change the text color in the second button to a color you will be able to see on light and dark backgrounds (I chose gray)

Screenshot - Sliding Buttons - Step 22

23. Position your second button over the right half of your first button

Screenshot - Sliding Buttons - Step 23

24. Preview in browser – that should do it, your screen should look like the image below. Play with colors, radius, and transparencies to achieve different effects.

Screenshot - Sliding Buttons - Step 24

I created a starter file for you, complete with a working demo on the "Complete" page. Check it out and download the package below.

DOWNLOAD THE STARTER FILE HERE

Christopher Watson
Christopher Watson / Pittsburgh, PA

Christopher Watson joined the MuseThemes team as Art Director in 2014. Self-diagnosed with a design-obsession, Christopher is the perfect man to provide beautiful themes for our members.

Post A Comment

Trusted by over 75,000 Muse Designers

Join now to download our entire library of templates, widgets, and tutorials Join Now