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| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= 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? Thanks!

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
      a {
      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);
      }
    }
  }

---

Edits:

With the updated CSS code:

.follow-button{
     background: transparent;
     border: 1px solid #e8e8e8;
     display: block;
     float: right;
      &:hover { 
      background: #0089d1;
    }
    input[type='submit'] {
      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);
      }
    }
  }

The Rails submit form:

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %>
  <div><%= f.hidden_field :followed_id %></div>
  <%= f.submit "Follow", class: "follow-button" %>
<% end %>

Answer 1

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;
      }
  }