Is there a way to semantically create a <button> using the drag and drop tools instead of custom coding one?

Community resources
1

I’ve noticed that the button from the drag and drop editor defaults to an anchor tag <a> instead of a <button>. To ensure proper markup and adhering to a11y practices, is there a way to make it a button instead for use cases where the button isn’t being used as a link and just create events?

Also, considering the use case above, is there a way to add an image/icon/svg into that button without using a link block as a container (if I am able to use the button tag)?

2

If you can, share your read-only link. It helps community members understand your issue.
Also, webflow has a element. Just view this post from Webflow University

3

Hi, thanks for your response. The site im working on is private so here is an old project link with just a regular button added in from Webflows “elements” panel. https://kabeh2.webflow.io/

If you click inspect on the “button” you will see it is an anchor tag <a></a> instead of a <button></button>.

Screen Shot 2022-01-19 at 10.36.21 AM
Screen Shot 2022-01-19 at 10.36.21 AM2534×978 203 KB

I plan on using this button with interactions/events instead of using it as a link. Semantically it is incorrect to use the anchor tag in instances like this.

4

There is no build-in element for that but you can embed HTML using the Embed Element.

<style>
.btn{
	display:flex;
    justify-content: center;
    align-items: center;
}
</style>
<button type="button" class='btn'>
   <img src='https://www.w3schools.com/tags/smiley.gif'>
   <span>Click Me!</span>
</button>

Tip: You can style this button in webflow. For that just insert the div or button element in webflow designer and style that after that apply that class to that button.

2 Likes
5

Ah ok, thanks. Wasn’t sure if their button was configured in a way to change but I guess not. Thank you for confirming. Much appreciated.

6

if that helps can you mark this as the solution? :monkey_face:

7

Not seeing how to mark as solution here sorry. Liked it though. If you have any instructions on how to do so, that would be appreciated. Thanks
Screen Shot 2022-01-19 at 11.26.21 AM

8

Yes, @Muhammad_Dilshad is correct. I misunderstood your query.
There is a wishlist item on creating a <button> block. But not much else from the Webflow Team on making this a possibility as shown in this thread.
Thanks again for jumping in on this :+1:.

9

It would be really great to just have a element from Webflow, as it’s super important for semantically correct code and accessibility. I’ve voted in the wishlist item mentioned by @whitakereditions.

The workaround I have come to for now is just using role="button" as a custom attribute. Other tags such as “aria-label” or “title” may be useful for accessibility.

Here’s a guide by MDN:

1 Like
10

You can now do this thanks to the Magic Elements Webflow app! (I have zero affiliation with this app and i think it is 1000% free)

Basically, the DOM element allows you to create any semantic HTML element and style it in Webflow without using an embed.

11

You no longer need an App to create custom elements — just today, Webflow added the Custom Element within the Advanced section of the Add panel :tada:

1 Like