How to Make a materialize CSS button's width same as col s12?

Question

I want to make the Submit button's length same as 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 which you have your input field in is limited to a certain width (in the way how the Bootstrap columns work), you can put the .btn inside a column as well.

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

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

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