Streaming live at 10am (PST)

Button Design for website


I am struggeling a bit with designing my buttons and really hope that some of you guys can help me out.

The design wanted is most likely similar to the attached picture where you have a button with a colur in the left site and hopefully a image together with a next.

I have tried to insert a Div Block to get the image next to the button which also looks fine - I just need the colour in the left side.


Looking forward to be hearing from you.

There’s no reason why a button cannot be a complex element. There’s many ways to achieve your button but they’re not all precise and easy.

Start with a link block, give it a height (the height of the final button), and place inside one div followed by one text element.

Make the link block flexbox horizontal.

The first div is your yellow line, so give it a width, 100% height and the yellow color. In the flex child settings, click on the x to make it respect its given width.

The second element is a text element + icon. Set to display block. Set to width 100%. Set the padding left to 40px, padding right to 20px, add the icon as a background image, non repeat, centered vertically and anchored to the left, then move it left 20px. Set the flex child settings to enlarge eventually.

Hi Vincent,

Thank you very much!

Wish you a very nice day!