Streaming live at 10am (PST)

Buttons with more elements


#1

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


#2

@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:


#3

O wow, thanks Ethan, this is great!

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

All the best,
Lucas


#4

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


#5

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


#6

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.


#7

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/


#8

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