diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 6a20442ed41..66bfaca7c6e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -368,6 +368,7 @@
 .openerp .oe_left {
   float: left;
   margin-right: 8px;
+  width: 305px;
 }
 .openerp .oe_right {
   float: right;
@@ -456,11 +457,46 @@
   background: #ed6f6a;
 }
 .openerp .oe_button_box {
-  width: 270px;
-  text-align: right;
+  width: 400px;
+  text-align: left;
 }
-.openerp .oe_button_box button {
-  margin: 4px;
+.openerp .oe_button_box .oe_stat_button:hover {
+  background: #7c7bad;
+  color: white;
+}
+.openerp .oe_button_box .oe_stat_button:hover .fa {
+  color: white;
+}
+.openerp .oe_button_box .oe_stat_button {
+  font-weight: normal;
+  display: inline-table;
+  width: 33% !important;
+  height: 42px;
+  margin: 0px -1px -1px 0px;
+  padding: 0;
+  color: #666666;
+  border: 1px solid #dddddd;
+  border-radius: 0;
+  box-shadow: none;
+  background: white;
+}
+.openerp .oe_button_box .oe_stat_button > div {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: left;
+  padding: 0;
+  line-height: 120%;
+}
+.openerp .oe_button_box .oe_stat_button .stat_button_icon {
+  color: #7c7bad;
+  font-size: 24px;
+  padding: 0px 3px;
+  width: 37px;
+  text-align: center;
+}
+.openerp .oe_button_box .oe_stat_button svg {
+  width: 38px;
+  height: 38px;
 }
 .openerp .oe_avatar > img {
   max-height: 90px;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 38a47eed1c5..7110349557a 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -385,6 +385,7 @@ $sheet-padding: 16px
     .oe_left
         float: left
         margin-right: 8px
+        width: 305px
     .oe_right
         float: right
         margin-left: 8px
@@ -429,10 +430,40 @@ $sheet-padding: 16px
             &:hover
                 background: #ED6F6A
     .oe_button_box
-        width: 270px
-        text-align: right
-        button
-            margin: 4px
+        width: 400px
+        text-align: left
+        .oe_stat_button:hover
+            background: #7c7bad
+            color: white
+            .fa
+                color: white
+        .oe_stat_button
+            font-weight: normal
+            display: inline-table
+            width: 33% !important
+            height: 42px
+            margin: 0px -1px -1px 0px
+            padding: 0
+            color: #666
+            border: 1px solid #dddddd
+            border-radius: 0
+            box-shadow: none
+            background: white
+            > div
+                display: table-cell
+                vertical-align: middle
+                text-align: left
+                padding: 0
+                line-height: 120%
+            .stat_button_icon
+                color: #7C7BAD
+                font-size: 24px
+                padding: 0px 3px
+                width: 37px
+                text-align: center
+            svg
+                width: 38px
+                height: 38px
     .oe_avatar
         > img
             max-height: 90px
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 3dc148bc7c1..7b60957807e 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1277,6 +1277,9 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         var defs = [];
         _.each(this.to_replace, function(el) {
             defs.push(el[0].replace(el[1]));
+            if (el[1].children().length) {
+                el[0].$el.append(el[1].children());
+            }
         });
         this.to_replace = [];
         return $.when.apply($, defs);
@@ -1304,7 +1307,7 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
         var tagname = $tag[0].nodeName.toLowerCase();
         if (this.tags_registry.contains(tagname)) {
             this.tags_to_init.push($tag);
-            return $tag;
+            return (tagname === 'button') ? this.process_button($tag) : $tag;
         }
         var fn = self['process_' + tagname];
         if (fn) {
@@ -1321,6 +1324,13 @@ instance.web.form.FormRenderingEngine = instance.web.form.FormRenderingEngineInt
             return $tag;
         }
     },
+    process_button: function ($button) {
+        var self = this;
+        $button.children().each(function() {
+            self.process($(this));
+        });
+        return $button;
+    },
     process_widget: function($widget) {
         this.widgets_to_init.push($widget);
         return $widget;
@@ -1906,6 +1916,8 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
     template: 'WidgetButton',
     init: function(field_manager, node) {
         node.attrs.type = node.attrs['data-button-type'];
+        this.is_stat_button = /\boe_stat_button\b/.test(node.attrs['class']);
+        this.icon = node.attrs.icon && "<span class=\"fa " + node.attrs.icon + " fa-fw\"></span>";
         this._super(field_manager, node);
         this.force_disabled = false;
         this.string = (this.node.attrs.string || '').replace(/_/g, '');
@@ -1976,7 +1988,6 @@ instance.web.form.WidgetButton = instance.web.form.FormWidget.extend({
         var self = this;
 
         var context = this.build_context();
-
         return this.view.do_execute_action(
             _.extend({}, this.node.attrs, {context: context}),
             this.view.dataset, this.view.datarecord.id, function () {
@@ -2805,6 +2816,50 @@ instance.web.form.FieldProgressBar = instance.web.form.AbstractField.extend({
     }
 });
 
+/**
+    The PercentPie field expect a float from 0 to 100.
+*/
+instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
+    template: 'FieldPercentPie',
+
+    render_value: function() {
+        var value = this.get('value'),
+            formatted_value = Math.round(value || 0) + '%',
+            svg = this.$('svg')[0];
+
+        svg.innerHTML = "";
+        nv.addGraph(function() {
+            var size=43;
+            var chart = nv.models.pieChart()
+                .width(size)
+                .height(size)
+                .margin({top: 0, right: 0, bottom: 0, left: 0})
+                .donut(true) 
+                .showLegend(false)
+                .showLabels(false)
+                .tooltips(false)
+                .color(['#7C7BAD','#DDD'])
+                .donutRatio(0.62);
+   
+            d3.select(svg)
+                .datum([{'x': 'value', 'y': value}, {'x': 'complement', 'y': 100 - value}])
+                .transition()
+                .call(chart)
+                .attr({width:size, height:size});
+
+            d3.select(svg)
+                .append("text")
+                .attr({x: size/2, y: size/2 + 3, 'text-anchor': 'middle'})
+                .style({"font-size": "10px", "font-weight": "bold"})
+                .text(formatted_value);
+
+            return chart;
+        });
+   
+    }
+});
+
+
 
 instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
     template: 'FieldSelection',
@@ -5851,6 +5906,26 @@ instance.web.form.X2ManyCounter = instance.web.form.AbstractField.extend(instanc
     }
 });
 
+/**
+    This widget is intended to be used on stat button numeric fields.  It will display
+    the value   many2many and one2many. It is a read-only field that will 
+    display a simple string "<value of field> <label of the field>"
+*/
+instance.web.form.StatInfo = instance.web.form.AbstractField.extend({
+    init: function() {
+        this._super.apply(this, arguments);
+        this.set("value", 0);
+    },
+    render_value: function() {
+        var options = {
+            value: this.get("value") || 0,
+            text: this.string,
+        };
+        this.$el.html(QWeb.render("StatInfo", options));
+    },
+
+});
+
 /**
  * Registry of form fields, called by :js:`instance.web.FormView`.
  *
@@ -5878,6 +5953,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'reference' : 'instance.web.form.FieldReference',
     'boolean' : 'instance.web.form.FieldBoolean',
     'float' : 'instance.web.form.FieldFloat',
+    'percentpie': 'instance.web.form.FieldPercentPie',
     'integer': 'instance.web.form.FieldFloat',
     'float_time': 'instance.web.form.FieldFloat',
     'progressbar': 'instance.web.form.FieldProgressBar',
@@ -5888,6 +5964,7 @@ instance.web.form.widgets = new instance.web.Registry({
     'monetary': 'instance.web.form.FieldMonetary',
     'many2many_checkboxes': 'instance.web.form.FieldMany2ManyCheckBoxes',
     'x2many_counter': 'instance.web.form.X2ManyCounter',
+    'statinfo': 'instance.web.form.StatInfo',
 });
 
 /**
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 7ba06b69095..23cad2098dc 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1195,6 +1195,11 @@
         <span></span>
     </span>
 </t>
+<t t-name="FieldPercentPie">
+    <span class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
+        <svg></svg>
+    </span>
+</t>
 <t t-name="FieldStatus">
     <ul t-att-class="'oe_form_field_status ' + (widget.options.clickable ? 'oe_form_status_clickable' : 'oe_form_status')" t-att-style="widget.node.attrs.style"/>
 </t>
@@ -1358,13 +1363,15 @@
     </div>
 </t>
 <t t-name="WidgetButton">
-    <button type="button" class="oe_button oe_form_button"
+    <button type="button" t-att-class="widget.is_stat_button ? 'oe_stat_button btn btn-default' : 'oe_button oe_form_button'"
         t-att-style="widget.node.attrs.style"
         t-att-tabindex="widget.node.attrs.tabindex"
         t-att-autofocus="widget.node.attrs.autofocus"
         t-att-accesskey="widget.node.attrs.accesskey">
-        <img t-if="widget.node.attrs.icon" t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
-        <span t-if="widget.string"><t t-esc="widget.string"/></span>
+        <img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
+        <div t-if="widget.is_stat_button" class="stat_button_icon"><t t-if="widget.icon" t-raw="widget.icon"/></div>
+        <span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
+        <div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
     </button>
 </t>
 <t t-name="WidgetButton.tooltip" t-extend="WidgetLabel.tooltip">
@@ -1937,4 +1944,6 @@
 <t t-name="X2ManyCounter">
     <a href="javascript:void(0)"><t t-esc="text"/></a>
 </t>
+<t t-name="StatInfo">
+    <strong><t t-esc="value"/></strong><br/><t t-esc="text"/></t>
 </templates>