Modifying Bootstrap form's submit button to custom css

Question

I have been learning from and using elements of Hartl's Rails tutorial for my own app and learning experience. In the tutorial, in order to follow a user, the default option has been clicking through a Bootstrap-Sass button alongside Rails' `form_for` helper as seen below: ``` <%= form_for(current_user.relationships.build(followed_id: @user.id)) do |f| %>

<%= f.hidden_field :followed_id %>

<%= f.submit "Follow", class: "btn btn-large btn-primary" %> <% end %> ``` However, I'd like to modify the input as a custom button, and changing the class from `btn btn-large btn-primary` to `.follow-button`. My CSS for `follow-button` as follows. As noted in the comments, I have having trouble modifying basic elements like the transparency and font size and color (the font seem to default to the basic Bootstrap font), while other elements, such as the hover aspect does function. How do I override some of the default Bootstrap settings for forms so that all my custom elements come out? T…

Accepted Answer

You are styling a `.follow-button` that contains a link (`a`). but `f.submit` creates a input type of submit. Since there is now "a", it would never match your style selectors.

```
<%= f.submit "Follow", class: "follow-button" %>
```

and then

```
.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      background: #0089d1;
      color: #006faa;
      font-weight: 400;
      font-size: 1.4em; //font size does not change
      display: block;
      padding: 0px 4px 0px 4px; //modification doesn't show..
      text-decoration: none;
      &:hover { 
        color: rgb(229, 246, 255);
        background: #0089d1;
      }
  }
```

Modifying Bootstrap form's submit button to custom css

Solution

Problem