Streaming live at 10am (PST)

Making a button


#1

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!


#2

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.


#3

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

Enjoy :)


#4

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


#5

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


#6

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!


#7

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


#8

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?


#9

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


#10

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?


#11

Hmm... I think I answered my own question smile


#12