diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 5d0f452863f..9a6541882ba 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -283,12 +283,12 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- PUBLISH ---- */
-.css_unpublish, .css_publish {
+.css_published .btn-danger, .css_published .css_publish {
   display: none;
 }
 
-.css_published .css_unpublish, .css_unpublished .css_publish {
-  display: block;
+.css_unpublished .btn-success, .css_unpublished .css_unpublish {
+  display: none;
 }
 
 [data-publish='off'] {
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index a08aee8cfd1..d498cdbb402 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -202,10 +202,12 @@ ul.nav-stacked > li > a
     text-transform: uppercase
 
 /* ---- PUBLISH ---- */
-.css_unpublish, .css_publish
-    display: none
-.css_published .css_unpublish, .css_unpublished .css_publish
-    display: block
+.css_published
+    .btn-danger, .css_publish
+        display: none
+.css_unpublished
+    .btn-success, .css_unpublish
+        display: none
 
 [data-publish='off']
     +opacity(0.5)
diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index 79d5f6b9d57..64767d95171 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -266,12 +266,11 @@
 
         /* ----- PUBLISHING STUFF ---- */
         $(document).on('click', '.js_publish_management .js_publish_btn', function () {
-            var $data = $(this).parent(".js_publish_management");
-        var self=this;
+            var $data = $(this).parents(".js_publish_management:first");
+            var self=this;
             openerp.jsonRpc($data.data('controller') || '/website/publish', 'call', {'id': +$data.data('id'), 'object': $data.data('object')})
                 .then(function (result) {
                     $data.toggleClass("css_unpublished css_published");
-                    $(self).toggleClass("btn-success btn-danger");
                     $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off');
                 }).fail(function (err, data) {
                     website.error(data, '/web#return_label=Website&model='+$data.data('object')+'&id='+$data.data('id'));
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 2ba72fc581e..8734777dc4f 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -277,14 +277,18 @@
         <template id="publish_management">
             <div t-if="editable" t-ignore="true" class="pull-right css_editable_mode_hidden" t-att-style="style or ''">
                 <div t-attf-class="btn-group js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-controller="publish_controller">
-                    <button t-attf-class="btn btn-#{object.website_published and 'success' or 'danger'} js_publish_btn">
-                        <span class="css_publish">Not Published</span>
-                        <span class="css_unpublish">Published</span>
-                    </button>
+                    <button class="btn btn-danger js_publish_btn">Not Published</button>
+                    <button class="btn btn-success js_publish_btn">Published</button>
                     <button type="button" t-attf-class="btn btn-default dropdown-toggle" t-att-id="'dopprod-%s' % object.id" data-toggle="dropdown">
                         <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id">
+                        <li>
+                            <a href="#" class="js_publish_btn">
+                                <span class="css_unpublish">Unpublish</span>
+                                <span class="css_publish">Publish</span>
+                            </a>
+                        </li>
                         <t t-raw="0"/>
                         <li t-if="publish_edit">
                             <a t-att-href="'/web#return_label=Website&amp;model=%s&amp;id=%s' % (object._name, object.id)"