SVG as a submit button

SVG is a great format for your web graphics and icons especially. There is a small trick how to use an inline svg image as a submit button inside your form.

First thing to do is to wrap your image inside a label tag together with the submit button.

<form action="/search/" class="hide-submit" method="GET" >
  <input name="q" type="text" />
  <label>
    <input type="submit" />
    <svg xmlns="http://www.w3.org/2000/svg" ...>
      <path d=" ..." />
    </svg>
  </label>
</form>

The label associates these two elements together, so if you click one of them it acts like you clicked on the another as well.

Lastly we need to hide the actual submit button with a simple CSS.

form.hide-submit input[type="submit"] { display: none;}

And we have an inline svg image that behaves like a submit button without any use of javascript.

Resources


Did you like the article? Send me a comment!