Nice look button – FrontPageBox

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}"} %>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s