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-
- Select an artboard from the home page of Adobe XD.
- 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-
- Right click on the layers and press Group.
- 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.
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.
This Post Has 8 Comments
Pingback: The basics of UI and UX design-2021 | UI UX Design Guide
Thank you for sharing your info. I truly appreciate your efforts and I am waiting for your further write ups thanks once again.|
Thank you so much 🙂
Hello there, You have performed an incredible job. I’ll certainly digg it and in my view recommend to my friends. I’m confident they will be benefited from this site.|
Hello! I know this is kind of off topic but I was wondering which blog platform are you using for this site? I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good platform.|
What’s Going down i am new to this, I stumbled upon this I’ve found It absolutely useful and it has helped me out loads. I’m hoping to give a contribution & assist other users like its helped me. Good job.|
An outstanding share! I’ve just forwarded this onto a co-worker who had been conducting a little homework on this. And he in fact ordered me breakfast simply because I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanks for spending some time to discuss this topic here on your site.|
I know this site gives quality dependent articles or reviews and additional material, is there any other website which presents these information in quality?|