button_to creates non-clickable button

I've noticed an odd behavior with button_to. I have some stylized buttons. When button_to is generated the input submit field is placed inside the button element. What ends up happening is that the inner edges of the button when clicked do not redirect the user to the new page. The user is forced to directly click on the text to redirect.

My question is, how do I fix this? I don't think CSS is a possible solution. Ideally I would like to apply the classes I pass in the button_to method to the input field. That way the input field becomes the button and not the form.

Here is the button_to method.

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-button is-normal start-course'}
         ).html_safe

Here is the html that is generated.

<form class="start-course-button is-normal start-course" method="post" action="/new-course">
  // This must be clicked below and not the form itself for there to be a redirect
  <input type="submit" value="Click me!">

  <input type="hidden" name="authenticity_token" value="secret_auth_token">
</form>

Currently, you are applying styles to the form rather than the submit input inside of it. You can use a child selector to select the submit input as the form's child for a pure CSS solution.

For clarity's sake, create a new class to apply to the form. This class will select the child input of type submit.

.start-course-form input[type="submit"] {
/* button styles */
}

Then, update your helper method with the correct class.

button_to("Click me!", 
          "/new-course",   
          {class: 'start-course-form is-normal start-course'}
         ).html_safe

Note that this will not make the button a member of the start-course-button class, it will just look the same.