Button Code
Save the below code to _button.html.erb
<div> <a href="<%= url %>" style="text-decoration:none;"> <div> <div style="width: 50px;"> <img src="/images/<%= icon %>" alt=""/> </div> <div> <h2 style="font-size:18px;width:100px;margin-bottom:0px;"><%= lng title %></h2> <p style="margin-top:0px;"> <%= lng description %> </p> </div> </div> </a> </div>
CSS
.frontpagebox { background-image: url(/images/bg-offer.png); height: 100px; width: 250px!important; border: 1px solid #e5e5e5; border-radius: 10px; margin-bottom: 10px; } .frontpagebox:hover { background-image: url(/images/bg-offer-n.png); height: 100px; width: 250px; border: 1px solid #bfbfbf; border-radius: 10px; } .frontpagebox p { width: 120px; } .frontpagebox img { width: 100px; height: 100px; padding-left: 5px; } .frontpagebox h2 { line-height: 20px; position: relative; left: 80px; top: 10px; text-decoration: none; color: #333; font-size: 18px; } .frontpagebox p { position: relative; left: 80px; top: 20px; font-size: 11px !important; text-decoration: none !important; color: #333; }
Usage
<%= render :partial => 'pages/partials/button', :locals => { :title => category.name, :description => category.description, :url => "/categories/#{category.to_param}", :icon => "#{fileNameOnly}"} %>