Changing a button for desktop vs phone

i have a button that i want to change for for phone, it looks good on desktop and tablet, but i need to make the button smaller on phone screens, but when i do it changes the size on desktop, it also wont let me copy the button stating only one instance is allowed in this component, how do you guys get around this?

i found a workaround if anyone is interested(probably janky, but it works), basically i had a button that said search, and on mobile i just wanted a magnifying glass, so on mobile i hid the opacity of the button to 0% and moved a magnifying glass under it using absolute positioning, so when someone clicks on the magnifying glass its still actually hitting the invisible button.

if this is too janky feel free to let me know what a proper course of action is.

Lol if it works, it works I guess.

A less jank solution would be changing your button into a link block. That way your can have a both a “search” text block hidden on mobile & a search icon visible on mobile inside the element. Then just style link block how you want on mobile viewport.

thats a good idea, that also seems somewhat janky, theres gotta be a cleaner way to do this, also would that break functionality with the search bar? -edit: cant change the search bar into a link block with the search bar, it wont allow it.

Actually, Webflow’s button is just an <a> link anyway.

Typically for an icon button, you just take a linkblock, drop an image icon and a text element in. Style the linkblock like a button, color padding, hover state, etc., and make it flex horizontal with the children centered vertically.

Boom. Icon button.

Then you decide on the details like the icon visibility, text size, and text visibility, by breakpoint.

If this is a common design pattern on your site, make it a component, and set the image, link and text as properties you can define.

1 Like

unfortunately im using the search element and it wont let me remove the button nor can i change it to a linkblock

You don’t need to use the search element.
Just use a form instead.

form action = /search
form method = GET

input name = query

thanks ill try it, is that custom code or something i can fiddle around within webflow?

Those are your form and input settings in Webflow.

Hold up, I reread your thread, and I see what you’re trying to do now.
If your icon button is meant to act as a form submit button, then you’ll need custom code.

The reason is that a submit button is its own thing that is inherently not great for use as an icon button, as it’s an <input type=submit> element. Inputs are void elements which generally don’t have children, thus, no easy way to add the icon in the designer.

Two possibilities to make this designer-friendly.

CUSTOM CODE
Build your DIV+icon+text button, setup a JS event to submit the form when it’s clicked.

CUSTOM CSS
You could also do this by adding the icon using custom CSS. You’d have 2 submit buttons in your form, one visible on desktop, the other only on mobile. Custom CSS would be used to left-pad your text, and to add your icon.

Both would require you learning JS or CSS to achieve that setup, but the advantage is your buttons are actually designer-stylable in their fonts, hover, padding, borders, colors, etc.

If you’re not comfortable with those, here’s a hack that should work well enough.
I’d go back to your janked solution but adjust it as follows-

  • Use a standard submit button, but have two of them, Desktop and Mobile versions
  • Hide and show them by breakpoint

Desktop version-

  • Use the background image, left position, custom, no tiling, for your icon
  • Use left padding to indent your text

Mobile version-

  • Similar, but has no text
  • Background is centered
  • Width is set explicitly, since it has no content Possibly height as well.