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 and search for all other answers here, you'll get a complete idea of what WF can do.


See ::
And here is how it's done ::

Enjoy :)


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


@tedserwebflow you might like the following video :)


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!


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


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