M.M M.M - 2 months ago 13
HTML Question

MaterializeCss Form input (submit) button

I am asking this question because I was faced we this very problem and found little (unconcise) to none information on the matter, here goes:

Having an html form, how to properly set up a submit button with materializecss?

If you try the conventional way, that is:

<div class="file-field input-field">
<input type ="submit" class ="btn waves-effect waves-light" value = "Submit"/>

This is what you'll get:
enter image description here

As you can see the clickable part is only the middle of the button, and the rest won't trigger the form submition.

What i am looking for are answers (no javascript, just html) that offer alternatives. I'll post my own answer and hope for interesting alternatives.


This worked out great and allows for image inclusion:

<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Submit
        <i class="material-icons right">cloud</i>


enter image description here