How to Create a Button Hover In 2 Minutes - Adobe XD Tutorial

[@kimotami9982]

this is what everybody who calls himself/herself a youtuber must do. direct to the point, good tone, good presentation. well done dude. (thumbs-up)

[@daanvanlieshout4193]

Needed to replay the hover edit state part around 10 times I think, because i've never done anything like this before and it was a little fast. But at the end I managed to do it! Thanks for the video

[@whitneybell8236]

I'm a career UI designer in games, and I've mostly ignored XD until pretty recently. I'm ramping up on it now, and I found your video very helpful. While I'm extremely familiar with Photoshop and Illustrator/design in general, I'm thirsty for videos that move quickly to the features I want. Your video title and format were absolutely perfect for my use case. Thank you!

[@crmsuite.estate6481]

if you could make it in 3 mins instead of rushing it, it would be even better. It would be easier with the shortcut written on the video. Thanks!

[@sauravbasu2390]

You're now my go-to guy for Adobe xD

[@analysemarches576]

so direct to the point and yet explicative. Your the best out there love u

[@ivanbadia3232]

Extremely helpful when exploring micro interactions before development using webflow

[@XMao-nc6tc]

That's great! These kind of short videos are really gonna help people who need tutorials of new/specific functions. And you made them so easy to understand. Thank you and happy holidays!

[@CalerEdwards]

Thanks for the great feedback! Happy Holidays :D

[@soultabs]

Great vide... never thaught of using the mask layer to create a button hover efx

[@gustavozavanin6341]

Clean! thank you.

[@JYR-t5t]

Thank you so much! It is helpful

[@ljtirado5934]

Love this. you are the man!!!!

[@jdgimzek]

2 minutes is how I want ALL my demo/tutorials

[@jordieneumann1712]

thank you this was really helpful and your voice didnt make me want to end it all. nice.

[@Ira_Livnat]

Thank you. Amazing!

[@smsm8731]

Please make more of these micro interaction videos. Love you man.

[@hanijahanyan1133]

Sehr Gut , Danke 💎

[@yannethyovankanunezalborno3366]

very helpful, short and to the point. thank you!

[@yvona21nov]

I love it. I was looking for this specific tutorials and some of the videos on youtube are 15min!!! 🙈 This is perfect - short and sweet and right to the point. Please post more

[@ahmadfaizadnan]

Love this format! Keep it coming :)

[@NuisanceYT]

I was good to the point of the default state, I see you have layered everything on the left and its not really mentioned so gets abit awkward when selecting what to hover

[@lienekristiansena9808]

kzbin.info/www/bejne/jIC9i56oiLSmfck

[@ihajo]

Love the short and helpful videos

[@MrJulianberry2]

Great video once again Caler!

[@sahar.freddiesmum]

dude......................... u have no idea how much time u saved me

[@vigneshsr.]

Awesome one man, great job.

[@akankshi100]

This was very helpful!! Please keep making such videos 👍🏾

[@CalerEdwards]

You got it!

[@priyanshinaik3253]

loved it !!

[@SamTechYT]

Hey man, can you write the commands you use in every step either on the screen on in description box.

[@dimz2916]

Dudee Thank You soo much 🥺

[@iESCAP1SM]

Very well made! A question from someone just getting into Xd: How do I prevent the invisible mask area from being a hover trigger? Say I want an image to expand into a larger version of when hovered, but I do now want to enlarge the image when I hover the part of the screen where it will 'end up' while hovering. (there are other elements besides the area, so I don't want to just enlarge the image by itself as a hover state)

[@philhooper1540]

Amazing! Thank you indeed

[@DanielTeras]

That is dope, I love it! Thank you for this demo!!!

[@AshutosJain]

This is great. Short and simple.

[@CalerEdwards]

Thank you :D

[@michaelcharbit953]

Awesome! I didn’t know you could do that! Thanks

[@John-ss3gt]

It's like Peter Mckinnon's two-minute Tuesdays)) well done

[@debzinterlude]

Thank you 🤩

[@CalerEdwards]

No problem

[@shaminedsouza1702]

Very helpful video

[@davidjohnson3459]

Thanks for the vid! I reference it every time I go to make a hover state in XD haha

[@shashankr7705]

Hey Caler! Loved the representation! Super Helpful. Thanks mate

[@13olivier]

Right to the point. Thank you for this video !

[@CalerEdwards]

You bet :D

[@sarafathabib]

Love this :)

[@rofazayn]

Keep them coming Caler :D

[@CalerEdwards]

Will do :D

[@felixstoffel2018]

Didn't understand a single thing after 1:50...

[@OnWhiteShore]

Cool & simple! 👍Great thanks!

[@CalerEdwards]

Glad you like it!

[@ashleyfang3673]

That's really helpful and easy to understand how to do. Thanks!

[@richardottley4611]

Thanks I like this format of a 2 minutes video, short and to the point.. merry Christmas and happy New year happy holidays 🎄🎉😎

[@ux_mylife]

thank you! quick and easy, well done!

[@KohlHosein]

Love it!

[@RocketBuster]

Thank's a lot dude you help me out!

[@CalerEdwards]

Glad I could help!

[@MrMedoarts]

Awesome! Caler keep going bruh!

[@CalerEdwards]

Thanks! Will do :D

[@loviskopcke5304]

That was awesome!

[@kingkwadwo832]

extremely helpful. Thank you for this.

[@alystdesign]

Thanks so much for this. I followed along and got it done. Small progress but still learning XD

[@arbaazkhan4887]

Thanks man!

[@bendayhoe]

Always appreciative of your tutorial vids. Thank you Caler and Happy Holidays!

[@GatsbyLFT]

I made the mask, but when you did that the sidebar area on the left changed to allow for edit of the button, but mine didn't and I don't know how to get that

[@Sphinxxie89]

So you posted this video a while ago but today I used it to make my first Adobe XD project and I really liked the video, helped me understand it a lot! Hope you make more of these!

[@alaaabdelhalim219]

maaan i love u so match really

[@lillygraygray4018]

Thank you, this video is the exact specific thing I was looking for!

[@aditprasetyo53]

Thank you man!

[@CalerEdwards]

No problem!

[@zaimanza]

I never knew this feature was there. Omg. I've been doing it wrong this whole time

[@uxwithrobin]

That's new feature is great

[@jodorgu8640]

Very helpful

[@CalerEdwards]

Thank u :D

[@stephen3511]

Yeah, really useful... thanks. Two min vids are cool 👍👍

[@Deckard76]

Yeah, these style of tuts are great!

[@CalerEdwards]

Awesome! Thanks for the feedback and Happy Holidays :D

[@jacktony9523]

Thank you , it's useful

[@colddrink3235]

hi , it's nice work . please tell us about how you change your cursor to that blur circle !!!

[@CalerEdwards]

It does that when you view a prototype on Mac automatically.

[@colddrink3235]

@@CalerEdwards Oh ! ok ... thanks a lot

[@patrickalessi]

Make more videos like this!

[@psybitcoin]

So good! Happy Holidays!

[@CalerEdwards]

Thank you! Happy Holidays to you as well!

[@iamthemranonymous]

Awesome!

[@galihal7030]

thanks so much!

[@corredor305]

Thanks!

[@CalerEdwards]

You bet!

[@thebestofasha]

love the 2 mins feature

[@Allsjr]

This is cool and would love to see others

[@CalerEdwards]

Thanks for feedback :D Happy holidays!

[@elhamhashemi2303]

Perfect

[@spybooth1235]

Very goooood!!!!

[@siddheshdas756]

You are doing awesome work it so inspiring plz post some more inspiring vedio like this

[@CalerEdwards]

Thank you! Will do :D

[@marjankhatibi6416]

Amazing! How did you change your cursor to a white circle?

[@CalerEdwards]

Thanks, and when you preview the design on Mac the cursor changes to that automatically.

[@swiftbunnyOG]

this is cool but cutting out how you bring up certain menus kinda sucks for noobs like me.

[@felixfromgeoview5181]

Looks great! Thank you! Is it possible to do it with elementor?

[@thomasc7992]

thank u a lot

Great!

[@payamdaliri3910]

very nice tut Thanks Caler, this video deserves more views. BTW, which program you use for recording the prototype that your mouse cursor looks like a transparent circle?

[@streetdancerwar]

Amazing as always. Happy Holidays. :D

[@CalerEdwards]

Thank you! Happy Holidays :D

[@MdNaimurRahmanHera]

thanks

[@adesignerlife]

Crisp!

[@diegohurtado4560]

How do I see the "All Items>buttons" tab on the left side? I can't find mine to edit it, it just shows all aspects of the button as one component.

[@crazyparrot2786]

CTRL+Y

[@crazyparrot2786]

OR Cmd+ Shift + Y (on Mac) or Ctrl + Shift + Y (on Windows).

[@anubhavpandey2095]

Awesome

[@yogi12m1]

very cool

[@aminebidoud5543]

Thanks maan!

[@frontporchmedia]

Love the video, just wish there was more of a "why" component to it. For example, why did you have to resize your text twice down to 12, then back up 20?

[@kylebaxter3456]

on the preview of the prototype, notice the Let's Work Together text animates from smaller 12 to the larger 20. The change in size created the effect.

[@frontporchmedia]

@@kylebaxter3456 Awesome thank you for your video and response sir!

[@cmdaltctr]

Hi! I like it very easy to understand! Can you show how to do a slider gallery? (not carousel). Thanks!

[@junnick13]

Great tutorial but would be so much better being longer. People would be willing to wait!

[@ravenswood118]

The 'web' sidebar that you automatically get, I don't have that and don't know how to get there :(

[@vijaybagherwal7960]

useful

[@JohnDeBrazen]

Does this work for phone app prototypes?

[@rootdeyan]

Can you please show which keys you press instead to say them for example for newbies like me in this program, thank a lot !

[@NoorAhmad-lm7xn]

This is awesome.. Sir i have one problem, my lightning storm export kit plugin isn't working its saying update before using but there site not working properly and i can't login on it... Sir i want latest update of lighting storm export kit if you have then upload please

[@ashkanbalazadeh7180]

Nice

[@MegaSHAKII]

Great video ! Would love to see a tutorial on Neumorphism trend x

[@_sp_sp]

Is there a way to do a double hover? Like if there is a drop down within the button, the dropdown will have a specific micro state. I'm trying to replicate Zoom's mute/unmute button with an up arrow that opens a menu. When I'm hovered over the mic icon, it highlights the button and when I'm hovered over the up arrow within the button, it keeps the whole button highlighted but the arrow gets even more light.