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

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

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

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>.

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.

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

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.

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

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

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