Streaming live at 10am (PST)

Making a button

I am trying to make a navigation bar look like the attached image. I want to make a responsive version of our static college website. I made the text using a transparent PNG overlaid on a 1 pixel wide and several pixels tall background image that was tiled horizontally. I would like to make these type of buttons in webflow or close to it but with editable text instead of resorting to imagery to make them. Can this be done?

I am on the free version of webflow at the moment but if we can figure this out I think this would be a great product!

Can Webflow make a button with a gradient background? Try to add a button and a background gradient to it, it takes less time than to ask in the forum ◕‿◕ Kidding.

Take some time to read and watch everything that’s here http://tutorials.webflow.com/ and search for all other answers here http://help.webflow.com/, you’ll get a complete idea of what WF can do.

See :: http://tedserwebflow-button.webflow.com/
And here is how it’s done :: https://webflow.com/design/tedserwebflow-button?preview=8f88ff29675bca0fd69897425212902f

Enjoy :)

You’re awesome!!! Now I gotta reverse engineer how you did that but thank you - that’s great!

1 Like

@tedserwebflow you might like the following video :)
http://quick.as/rRATko3

I am very humbled by this! Wonderful video! I am going to go back and watch it several times to understand. I also just signed up and and now a paying customer. Thanks for taking the time!

1 Like

No problem. If you find yourself stuck somewhere feel free to ask here ;)

I do have one quick question as to why you chose to make the upper row of buttons a link box and the bottom row of buttons a button box?

Well… Button is actually a text-link with some parameters. Go on, create a button and remove it’s class - you will see what’s going on :) And to answer your question - why did I use text-link instead of button for upper links? Well, I wanted to show different approaches :)

1 Like

Makes perfect sense! I started to play with them.

I haven’t yet tried to make a button list collapsible when viewed in the small screen. Does it matter if it’s button class then or can I apply that action to any of the elements?

Hmm… I think I answered my own question :smile: