Product Block with Button

Product block/card/widget with description, price and "Add to Cart" button

Below you can find an example of responsive product block with with description, price and "Add to Cart" button. This block can be a part of online store's product overview page. It can be used together with any HTML/CSS Framework, like Twitter Bootstrap, Zurb Foundation, Skeleton and others.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="pb-block">
<div class="image-container">
<img class="block-image" src="/images/smartwatch-420-300.png?SDf">
</div>
<div class="block-content">
<div class="product-category"><a href="#">Gadgets</a></div>
<h2 class="block-header"><a href="#">Smartwatch</a></h2>
<p class="product-desc">
Features HR monitor, GPS and interchangeable straps.
</p>
<div class="price">$199.99</div>
<a class="add-to-cart" href="#">Add to Cart</a>
</div>
</div>
</div>
HTML
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

@font-face {
font-family: "content-blocks";
src: url("/fonts/content-blocks.eot");
src: url("/fonts/content-blocks.eot?#iefix") format("embedded-opentype"),
url("/fonts/content-blocks.woff") format("woff"),
url("/fonts/content-blocks.ttf") format("truetype"),
url("/fonts/content-blocks.svg#content-blocks") format("svg");
font-weight: normal;
font-style: normal;
}

[data-icon]:before {
font-family: "content-blocks" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "content-blocks" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Layout */

body {
font-family: 'Montserrat', sans-serif;
background: #fff;
}

.container {
padding: 0 20px;
max-width: 350px;
margin: 30px auto 0;
}

/* Block Styles */

.pb-block {
border: 1px solid #ddd;
background: #fff;
margin-bottom: 30px;
}

.pb-block .block-content {
padding: 15px 20px 30px;
font-size: 15px;
color: #999;
line-height: 23px;
text-align: center;
}

.pb-block .product-desc {
margin-bottom: 20px;
}

.pb-block .product-category a {
text-transform: uppercase;
color: #c4941c;
font-size: 11px;
letter-spacing: 2px;
text-decoration: none;
font-weight: bold;
}

.pb-block .price {
font-size: 21px;
color: #333;
margin-bottom: 25px;
}

.pb-block .block-header {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
}

.pb-block .block-header a {
color: #333;
text-decoration: none;
}

.pb-block .image-container {
position: relative;
}

.pb-block .block-image {
width: 100%;
}

.pb-block .add-to-cart {
display: inline-block;
padding: 10px 30px;
border-radius: 20px;
background: linear-gradient(135deg, #7e61d9, #745fee);
transition: all .75s ease;
text-transform: uppercase;
color: white;
line-height: 20px;
text-align: center;
font-size: 12px;
letter-spacing: 1.75px;
text-decoration: none;
box-shadow: 0px 0px 20px rgba(138,106,237,0.7);
transition: 1s linear;
}

.pb-block .add-to-cart:hover {
box-shadow: 0px 0px 40px rgba(138,106,237,0.9);
background: linear-gradient(135deg, #8768e9, #7661f2);
}
CSS
Browser support:
           
8+