Create a Hover Button in less than 2 minutes

In this tutorial, you will learn how to create a hover button in Adobe XD in less than 2 minutes. I am going to tell the exact specifications and color codes which I used. But you can manipulate them according to your need. Read thoroughly as you will also learn a few hacks and shortcuts. If you are an absolute beginner, these will be very helpful. So let’s begin…

1) Create a New Document and choose your artboard

To create a new document, you need to select an artboard size. This can be done in two ways-

1. Select an artboard from the home page of Adobe XD.
2. Select Custom Size artboard from the home page. Choose artboard (or press A) from the left toolbar and draw your custom artboard. You can also select pre-defined artboards from the options displayed in the right hand panel.

For this, I have selected Android Mobile artboard (360 X 640). (You might want to zoom in the images to view the complete interface clearly.)

Tip: Always rename your document and artboard and everything else right away. It is going to help you in structuring your document properly.

2) Select rectangle tool and create button background

Choose rectangle tool from the left toolbar (or press R) to create a button background. Play with the properties in the property inspector as shown in the below image.

Radius : 10

Fill : Unchecked

Border : Hex code- #160FE8, Size- 3

3) Write text on button background

To write text over rectangle layer, select text tool from toolbar (or press T). Make sure your text layer is above the rectangle layer or else the text might hide. If not, you can just drag the layers in the Layers Panel (or press Ctrl + Y) to fix the sequence. After typing the text, you can press Esc to come out of the typing mode.

Text : Segoe UI, 40, Semibold

Fill : Hex code- #160FE8

You might want to check this out : The 5 main types of User Interfaces

4) Group the text and rectangle layers

To group the layers, Shift select both of them. After this, grouping can be done in two ways-

1. Right click on the layers and press Group.
2. Press Ctrl + G.

5) Make button group Component

Press ‘+’ symbol in Component section in the property inspector to make the group component. The current button settings will be considered as the Default State.

6) Add Hover State to the component

Press ‘+’ symbol in front of Default State and choose Hover State.

7) Select Hover State and make changes to properties

First, select Hover State from the component section. Then, make changes to the layer properties one-by-one.

Select rectangle layer and fill it with color.

Fill : Checked, Hex Code- #160FE8

Select text layer and change the fill color. Also, increase the size of text to give zoom effect.

Fill : Hex Code- #FFFFFF, Text : 50

8) Hover Button is ready to play

Click the button group in the layers and again select the Default State from the component section. Save your document (keep saving it every once in a while) and test it using Desktop or Mobile Preview option in the top tab.

Conclusion

I hope you enjoyed this tutorial. I have explained each step in detail. Once you get the hang of it, you will be able to make hover buttons like these within a few minutes. Go around and play with the properties to learn faster.

If you have any doubt you can leave it in the comments section below. Don’t forget to share this tutorial with your friends if you liked it.