title: Cannot use "link_to" or "button_to" in Rails 4.2 with Semantic-UI
body: <p>I am using Semantic-UI for designing my rails app design. I have created a card layout with a button attached in the bottom of that card. But When I tries to add link_to or button_to to my text in the bottom attached button everything gets spoils.</p>
  
  <h2>HTML + Rails 4.2 Code Written:</h2>
  
  <pre><code>&lt;div class="ui four cards"&gt;
          &lt;a class="red card"&gt;
              &lt;div class="image"&gt;
                  &lt;%= image_tag("white-image.png") %&gt;
              &lt;/div&gt;
              &lt;div class="ui bottom attached button"&gt;
                  &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt;&lt;span class="little-space"&gt;&lt;/span&gt;&lt;%= link_to 'Deploy', controller: 'apps', action: 'show'%&gt;
  
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Output: </p>
  
  <p><a href="https://i.stack.imgur.com/rQqTZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQqTZ.png" alt="Try 1"></a></p>
  
  <p>Must look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pu0L3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pu0L3.png" alt="Original"></a></p>
  
  <hr>
  
  <p>Normal HTML and CSS works but when I try to use Rails4.2 helpers like "link_to" or "button_to" then everything gets wrong. Is there any way through which I can make whole card layout as clickable using Rails helper.</p>
  
  <hr>
  
  <p>Generated HTML Code:</p>
  
  <pre><code>&lt;div class="ui four cards"&gt;
          &lt;a class="red card"&gt;
              &lt;div class="image"&gt;
                  &lt;img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf"&gt;
              &lt;/div&gt;
              &lt;/a&gt;&lt;div class="ui bottom attached button"&gt;&lt;a class="red card"&gt;
                  &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt;&lt;span class="little-space"&gt;&lt;/span&gt;&lt;/a&gt;&lt;a href="/apps/show"&gt;Delpoy&lt;/a&gt;
  
              &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Simple output using HTML and Semantic-UI
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/&gt;
  &lt;script src="http://semantic-ui.com/dist/semantic.min.js"&gt;&lt;/script&gt;
  &lt;div class="ui four cards"&gt;
       &lt;a class="red card"&gt;
         &lt;div class="image"&gt;
          &lt;img class="ui wireframe image" src="http://semantic-ui.com/images/wireframe/white-image.png"&gt;
         &lt;/div&gt;
         &lt;div class="ui bottom attached button"&gt;
            &lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt;&lt;span class="little-space"&gt;&lt;/span&gt;Deploy
            
         &lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>