How to Add a Button Hover Effect in Figma

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 82

  • @pixelandbracket
    @pixelandbracket  Год назад +2

    Use Figma for Free 👉 pxlbr.link/figma

  • @christopherhealey8599
    @christopherhealey8599 6 месяцев назад +6

    I've had this explained to me several times and each time I THOUGHT I understood and could replicate, your video has actually taught me for good. Much appreciated, Subscribed!

  • @kicontentclub
    @kicontentclub Год назад +4

    love the calm and concise way you explain. Thanks so much!

  • @bustertalks2687
    @bustertalks2687 Год назад +2

    Thank you so much! So many other "walk-throughs" hyperspeed through this process, so I appreciate you taking the time to show it step by step. I'm just starting out in the UX world and want to learn how to do it right from the start, and this is a HUGE help in that goal!

  • @nateoliver7323
    @nateoliver7323 8 месяцев назад +3

    Thank you for explaining each of your steps. It's a rare thing these days.

  • @svetlanaabrahamyan8193
    @svetlanaabrahamyan8193 11 месяцев назад

    thank you! i always got confused in other explanation videos on buttons - this one is perfect, simple and concise, thank you!

  • @akshatha4549
    @akshatha4549 Год назад +1

    Thank you for explaining step by step and also showing how to place them in projects. Very helpful.

  • @Pixels_and_Points
    @Pixels_and_Points Год назад

    Thank you! I swear I watched several videos, and yours was the one that finally got this to work for me. I don't know what I was missing before, but +1 subscriber!

  • @sangio_davese
    @sangio_davese Год назад +1

    A very succinct and clear walk-through on the interactive button build stuff. Thanks!

  • @davidostrowski679
    @davidostrowski679 Год назад

    I've really been struggling this with goddamn simple thing. I'm just sitting in Starbucks doing this and I got it first time. I finally understand. REJOICE! Thank you for explaining it slowly and well-structured for people like me!

    • @pixelandbracket
      @pixelandbracket  Год назад

      Haha thank you so much for your kind words, I’m learning too!

    • @zubayduhabbas3550
      @zubayduhabbas3550 Год назад

      samee it took me time to understand this until I saw this vid !

  • @ebrubaunuajowohfia4449
    @ebrubaunuajowohfia4449 8 месяцев назад

    Thank you for explaining this properly. This Button-hovering thing has been giving me a headache for over a week now.

  • @ArianMozafari
    @ArianMozafari Год назад

    Life saver! I'm considering switching from Xd to Figma and found this so useful

  • @mauriciofernandorojas4248
    @mauriciofernandorojas4248 Год назад

    this was super helpful !!! very well explained !! i just used it in my portfolio ... THANK YOU !!!

  • @apuppydeer
    @apuppydeer Год назад

    Thank you so much! This worked flawlessly for what I was attempting to do, and makes this so easy to work with

  • @yeetyeet1727
    @yeetyeet1727 3 месяца назад

    thank u so much! you're informative and explain everything well - awesome teacher 🙌

  • @rawrdo123
    @rawrdo123 2 месяца назад

    Thanks for this tutorial! I'm rusty, so I just needed a quick refresher hahaha

  • @josemanuelcolmenaresrodrig2919
    @josemanuelcolmenaresrodrig2919 3 месяца назад

    Thank you, in my language there are no videos that explain well. You saved me.

  • @Alltheprettybubbles
    @Alltheprettybubbles Год назад

    This is incredibly helpful - thank you so much for this straight-forward and clear explanation!

  • @Prasannapendyala-l9p
    @Prasannapendyala-l9p Месяц назад

    this literally saved my life, Thank you

  • @sara3476
    @sara3476 11 месяцев назад +1

    This is really helpful!!! Thank you!😊

  • @mrinalsubash8358
    @mrinalsubash8358 Год назад

    Thank you for creating the pressed button. I want to ask you how have you created when there is a necessity for multiple buttons of the same kind to be clicked on one wireframe?

  • @azferkarim
    @azferkarim 7 месяцев назад

    crisp and concise. to the point!

  • @CurlyMade
    @CurlyMade 5 месяцев назад

    Super helpful, thankyou! 💚

  • @ogunjeremichael3141
    @ogunjeremichael3141 3 месяца назад

    Thanks for the detailed explanation

  • @puregege
    @puregege 22 дня назад

    very clear explanation thx

  • @atolagbeabisola2746
    @atolagbeabisola2746 3 месяца назад

    Thank you so much, you’re a great teacher.👏👏

  • @ozgun6155
    @ozgun6155 2 месяца назад

    Thank you very much, teacher(in turkish hocam), for this informative and useful video.

  • @CastleQueen24
    @CastleQueen24 Год назад +1

    Thank you for such an amazing tutorial! 🙏

  • @chioj36
    @chioj36 Год назад

    This reallllly really helped. Thank you.

  • @zubayduhabbas3550
    @zubayduhabbas3550 Год назад

    Thank youuuuuu so much you are the best instructor everrrrr

  • @HeavyK.
    @HeavyK. 11 месяцев назад

    This video changed my life.

  • @marsif906
    @marsif906 5 месяцев назад

    Thank you for explaining this. You are amazing.

  • @dancingvola1
    @dancingvola1 2 месяца назад

    Thank you so much, you beautiful person!!!

  • @srinivasnahak3473
    @srinivasnahak3473 11 месяцев назад

    It was short and helpful!!

  • @TaniyyaAlyy
    @TaniyyaAlyy 8 дней назад

    Sir, is there any other method to add variance in button?

  • @sipukni
    @sipukni 6 месяцев назад

    Thank you. This really helped.

  • @gloriacassidy
    @gloriacassidy 5 месяцев назад

    Thank you for sharing this video. It helped me out. I pray you excel in your endeavours and for God to bless your family and you.

  • @joyadebisi9312
    @joyadebisi9312 3 месяца назад

    Thank you so much

  • @AyeshaFazal-x2z
    @AyeshaFazal-x2z 6 месяцев назад

    Well explained🙌

  • @Casicasi-o5f
    @Casicasi-o5f Год назад

    wonderful tutorial

  • @cmse9502
    @cmse9502 3 месяца назад

    this helped, thx.

  • @SkrovnoCZ
    @SkrovnoCZ 8 месяцев назад

    What is with your delayed and out of sync mouse pointer? It is quite confusing.
    But your tutorial was helpful so thanks.

  • @elenasavenko5709
    @elenasavenko5709 9 месяцев назад

    So nice video! Gret job!

  • @tamar-r1x
    @tamar-r1x Год назад +1

    than you, very helpful expanation

  • @MoyoTornai
    @MoyoTornai Год назад

    Perfect video! Thank you .

  • @neptune1533
    @neptune1533 20 дней назад

    Thanks buddy

  • @sangio_davese
    @sangio_davese Год назад

    One thing I just got asked by my client is for the focus state-like where a user is using their tab key to move around and land on the button. Do you know of a way to add a variant and an interaction for this?

  • @Manojkumar-xf8rq
    @Manojkumar-xf8rq Год назад

    Thank u, Dude.. it's very helpful...

  • @abolfazlazarinvar-c3j
    @abolfazlazarinvar-c3j 2 месяца назад +1

    Thanks ❤‍🔥

  • @sarahakhavan8975
    @sarahakhavan8975 Год назад

    Hi, could you please explain how to change the text in the hover state? I need it for a special effect.

  • @pedroperaltavega8055
    @pedroperaltavega8055 Год назад

    freaking amazing

  • @tanyash.5353
    @tanyash.5353 Год назад

    Great tutorial. Thank you.

  • @asiasimpson70
    @asiasimpson70 Год назад

    What do you save this as? For example, if I wanted to move this over to a Canva document, how would I do that?

  • @MichaelLucas-t4i
    @MichaelLucas-t4i Год назад

    great job, very informative

  • @owandaisy4147
    @owandaisy4147 6 месяцев назад

    Thank you❤️❤️❤️❤️❤️❤️❤️

  • @user-gj5ml9ik2s
    @user-gj5ml9ik2s Год назад

    Great tutorial, its just a shame that (like with many other Figma tutorials I watch) the UI in the video doesn't match the current version of Figma... e.g. at 5:37 my 'interaction details' panel doesn't match up with yours. I see your video is only from 3 months ago aswell, its like Figma can't even keep something the same for just a few months without changing
    Man I can't stand this software!

  • @uiux_wira
    @uiux_wira Год назад

    wow its amazing tips, thanks , how can i record smooth zoom like you ,what tools you use? can i know ?

  • @stevendesigner
    @stevendesigner 10 месяцев назад

    Helpfull thanks!

  • @Megatron_27wot
    @Megatron_27wot Год назад

    Very clear explanation. Could you also cover the latest update of figma Dev mode. pls

  • @codelearn4549
    @codelearn4549 9 месяцев назад

    it's helpfull 👍

  • @Aliaskar98
    @Aliaskar98 Год назад

    Great content 👍

  • @gboy3534
    @gboy3534 4 месяца назад

    I have a problem, When I connect my default button to hover and choose while hovering the property 1 is also default instead of hover like yours.

  • @profex9410
    @profex9410 6 месяцев назад

    Busque mucho tiempo esta solucion, muchas graciasssss

  • @azhehe2641
    @azhehe2641 8 месяцев назад

    nice dude

  • @nerdypeachmango
    @nerdypeachmango 5 месяцев назад

    7:47 my button wasn't in the assets section. I don't know how to add the button to the assets panels.

  • @reginabell3814
    @reginabell3814 Год назад

    thank you

  • @graphiwhisper
    @graphiwhisper Год назад

    thanks boss!

  • @vykn80s
    @vykn80s 6 месяцев назад

    but how to click and navigate to another frame on hover it takes the variant but on click interaction is not working

  • @animehubking1537
    @animehubking1537 Год назад

    thank you very much

  • @matheuscolcombet257
    @matheuscolcombet257 2 месяца назад

    nice

  • @AmandaThomas-z5g
    @AmandaThomas-z5g 10 месяцев назад

    Yessssss!

  • @lunaticz0r
    @lunaticz0r Год назад +2

    and now....try to add a onclick to the button and how to fix that issue... Whenever I try to add a ''onclick'' to 'default' state (the state the button starts as) whenever I HOVER over the button it goes to their ''hover'' state and this variant does not have the ''onclick'' link which means whenever a user hovers over a button it doesnt go anywhere because the 'default' state has the onclick ink, not the hover... How the Heck do I fix that?!

    • @OG-Ronin
      @OG-Ronin 11 месяцев назад

      Exactly. Like yo I just want a button that when you click it an action happens or a button that you are able to just click

  • @jopowuy
    @jopowuy 6 дней назад

    doesnt work

  • @gabrielsmetzer4137
    @gabrielsmetzer4137 4 месяца назад

    I freaking just watched 4 commercials to watch this basic tutorial, this is worse than old-school television

  • @JackDaKoala
    @JackDaKoala Год назад

    Pin this comment!

  • @mykolaomelchenko9319
    @mykolaomelchenko9319 7 месяцев назад

    Thank you for a nice tutorial. The buttons are the colours of Ukrainian flag.

  • @mur9a
    @mur9a Месяц назад

    thank you!