How to a Create a Button Hover Effect in Adobe XD

[@Enzstar3ast]

How did you select the 'Submit' text and change the colour without letting it go back to default state? So I can change both text and box colour within the Hover state

[@ulearntech]

_To select text and change its colour in Adobe XD without letting it go back to its default state, you can follow these steps:_ 1. Select the text box or the text you want to change the colour of. Now, you can either physically select the text as shown in the video, or you can also select the text in the layers panel on the left-side too. 2. In the right-hand panel, click on the "Appearance" tab. In the "Appearance" tab, you can change the colour of the text by selecting the "Text" option and then selecting a new colour from the colour picker. 3. To change the colour of the text box or the background colour of the text, select the "Fill" option and choose a new colour from the colour picker. 4. To create a hover state for the text box, click on the "States" panel located in the right-hand side panel. 5. Click on the "+" icon next to the "Hover" state to create a new hover state. 6. Select the text box or text you want to change the colour of in the "Hover" state. 7. In the "Appearance" tab, follow the same steps as before to change the colour of the text and the text box or background colour of the text. 8. Save your changes. _You should be able to select text and change the colour without letting it go back to its default state, and create a hover state that changes the text and box colour when hovered over._ **NOTE:* _When you're testing the prototype, remember to start with the default state to kick off the testing phase from the beginning. If you begin with the hover state, the testing might not work properly. So, be sure to start with the default state to avoid any issues._ Thanks again for watching the video! I hope the other Adobe XD videos will be helpful to you as you continue your prototyping journey. If you're interested in learning more about design tools, don't forget to hit the subscribe button! Currently, I'm teaching an Adobe InDesign series, but I'll eventually circle back to Adobe XD and Figma too.

[@Enzstar3ast]

@@ulearntech thank you! Means a lot

[@ulearntech]

You're welcome. And thanks for watching

[@bashayerahmed4994]

I have watched many videos for making a simple outline animation button but all were so advanced and I was just about to give up. Thank you so much for a clear explanation tutorial!

[@ulearntech]

Thank you for your kind comment! I'm really glad to hear that my tutorial on creating a simple outline animation button was helpful to you. Don't worry, sometimes tutorials can seem too advanced at first, but with a clear explanation, anyone can learn and achieve great results. I appreciate your feedback and I'm here to help if you have any further questions or need assistance with anything else. Keep up the good work, thanks for subscribing and happy animating!

[@TristanFaransa]

Thank you. I have a problem: I have to click twice on the button to get to the link after the hoover state. What I do wrong?

[@ulearntech]

@TristanBM, that's odd. You have the 'default state' in which is when nothing is selected. You click to add another state, which is the 'hover state' means, when you hover of it, it may do some type of animation or change of colour, or something. And if you add another state, say 'toggle state' if you tap the 'button' or whatever it may be, it may take you to a new screen, or scroll to the next section or like you said 'link.' So, I am thinking you had created a 'toggle state'. Granted, you could have no 'hover state,' and went straight to the 'toggle state.' I prefer to have a 'hover state' just for design purposes By any chance, did you check to see if there are any updates? Sometimes there is, so, that may be it, When was the last time you did a full restart or shut-down of the computer. I normally don't turn off my laptop (it can be on for two weeks) unless I need to bring it with me. Let me know if that works for you?

[@TristanFaransa]

@@ulearntech The programme is updated and I restarted my mac 2 days ago. I've tried again with a simple square that goes bigger. I create the square, then component Default state, then an Hover state and I make the square bigger. I add a Toggle state" and link to the page I need. But, still, I have to click twice :/

[@ulearntech]

@@TristanFaransa Okay, that helps a bit...so, I am actually in class, so, what I did quickly was saved two files. And you can grab these files from here if you like: (removed) Always make sure when you test the prototype you start in the default mode. I did create two files. One for with the Hover State. And another one in the Toggle State without the Hover. I believe this is what you are hoping for? Let me know if this works.

[@TristanFaransa]

@@ulearntech Hello. Thank you, but, unfortunately, impossible to download the files, the page blocks each time I try.

[@ulearntech]

@@TristanFaransa ok. Let me try something different here. Gimme me second

[@lisakelly3046]

Very cool, it will make prototyping so much more interactive and a 'belieber' website or mobile app....like that jab at Justin Bieber.....ahhhhhhhhehehe

[@ulearntech]

Ok, I think I need to swap out that 'Justin Bieber' retouching sample out from the assignments!