Streaming live at 10am (PST)

Buttons with more elements

Hi,
I need to build a button with 2 font types in it and some graphical element.
on hover all should change colors.

thank you,
Lucas

@Lucaz Hello, Lucas! I often like to approach multi-element buttons by using a link or div block element as opposed to a button element (depending on the desired action). From there I nest the headers, subtext, images, arrows, etc.


I’ve made a preview demo here: https://preview.webflow.com/preview/recreated-in?preview=70bce4501a7c05b869fdfd908469b001 (find page titled @ Lucas)

Live demo here: http://recreated-in.webflow.io/untitled-4.


If you’d like further information on how to apply actions to link blocks and div blocks let me know. Happy designing! :smile:

O wow, thanks Ethan, this is great!

How did you make this arrow in the divblock I was wondering?

All the best,
Lucas

I used a div block and styled it with a background image. The button div is positioned relative so that the arrow div can be positioned as a fixed div (to push it to the right of the button).

The background image here

buttonarrow

Thanks Ethan,

sorry one more thing.

I understand the whole invert action. But how would it be if i would like the arrow change to an other color?
also that the title fone becomes one color and the text font an other?

Best,
Lucas

Hmm… I think if you want your arrow to change colors, you would have to recreate the black arrow in illustrator, Ps, Google drawings or something and give it a different color. Then you would set a hover state on the arrow div to change from the black arrow (as a background image) to the colored arrow.

So in short, 2 different images --> black for none state, and colored for hover state.

You can always use an icon font like “Fontawesome.” That way you can do easy hovers by changing the color of the typography.

http://fontawesome.io/cheatsheet/

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.