How to make materializable CSS button width same as col s12?

Question

I want to make the length of the "Send" button the same as in the input field above it.

<div class="row">
     <div class="input-field col s12">
        <input id="speciality" type="text" class="validate">
            <label for="speciality">Speciality</label>
     </div>
</div>
<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Search
        <i class="material-icons right">search</i>
    </button>
</div>

Answer 1

If your column in which you have an input field is limited to a certain width (how the Bootstrap column works), you can put .btninside the column.

After that, you can use the following CSS so that the width is equal to the input field:

.col.s12 > .btn {
   width: 100%;
}

Of course, if buttonas an element does not bend to this CSS rule, you can use instead <a class="btn">.

Answer 2

div col s12 btn-block :

<div class="row">
    <div class="col s12">
        <button class="btn btn-block waves-effect waves-light" type="submit" name="action">Search
            <i class="material-icons">search</i>
        </button>
    </div>
</div>

CSS:

.btn-block {
    width: 100%;
}