diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js
index 5b06bb166..e796f200c 100644
--- a/apps/common/main/lib/component/Button.js
+++ b/apps/common/main/lib/component/Button.js
@@ -315,13 +315,13 @@ define([
                     }
                 };
 
-                var doSplitSelect = function(select, e) {
+                var doSplitSelect = function(select, element, e) {
                     if (!select) {
                         // Is mouse under button
                         var isUnderMouse = false;
 
-                        _.each($('button', el), function(el){
-                            if ($(el).is(':hover')) {
+                        $('button', el).each(function(index, button){
+                            if ($(button).is(':hover')) {
                                 isUnderMouse = true;
                                 return false;
                             }
@@ -333,15 +333,18 @@ define([
                         }
                     }
 
-                    if (!select && (me.enableToggle && me.allowDepress && me.pressed))
-                        return;
-                    if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
-                        e.preventDefault();
-                        return;
-                    }
+                    if ( element == 'button') {
+                        if (!select && (me.enableToggle && me.allowDepress && me.pressed))
+                            return;
+                        if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) { // to depress button with menu
+                            e.preventDefault();
+                            return;
+                        }
+
+                        $('button:first', el).toggleClass('active', select);
+                    } else
+                        $('[data-toggle^=dropdown]', el).toggleClass('active', select);
 
-                    $('button:first', el).toggleClass('active', select);
-                    $('[data-toggle^=dropdown]', el).toggleClass('active', select);
                     el.toggleClass('active', select);
                 };
 
@@ -358,27 +361,29 @@ define([
                                 }
                             }
                             var isOpen = el.hasClass('open');
-                            doSplitSelect(!isOpen, e);
+                            doSplitSelect(!isOpen, 'arrow', e);
                         }
                     }
                 };
 
                 var doSetActiveState = function(e, state) {
                     if (isSplit) {
-                        doSplitSelect(state, e);
+                        doSplitSelect(state, 'button', e);
                     } else {
                         el.toggleClass('active', state);
                         $('button', el).toggleClass('active', state);
                     }
                 };
 
+                var splitElement;
                 var onMouseDown = function (e) {
-                    doSplitSelect(true, e);
+                    splitElement = e.currentTarget.className.match(/dropdown/) ? 'arrow' : 'button';
+                    doSplitSelect(true, splitElement, e);
                     $(document).on('mouseup',   onMouseUp);
                 };
 
                 var onMouseUp = function (e) {
-                    doSplitSelect(false, e);
+                    doSplitSelect(false, splitElement, e);
                     $(document).off('mouseup',   onMouseUp);
                 };
 
@@ -394,8 +399,8 @@ define([
                         $('button', el).on('mousedown', _.bind(onMouseDown, this));
                     }
 
-                    el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false));
-                    el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true));
+                    el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));
+                    el.on('show.bs.dropdown', _.bind(doSplitSelect, me, true, 'arrow'));
                     el.on('hidden.bs.dropdown', _.bind(onAfterHideMenu, me));
 
                     $('button:first', el).on('click', buttonHandler);
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index e1f3a65fd..d0c185b06 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -98,22 +98,6 @@
         }
     }
 
-    &.over:not(.open):not(.active):not(:active) {
-        &.split {
-            .inner-box-icon {
-                background-color: #e9e9e9;
-
-                &:hover {
-                    background-color: #d8d8d8;
-                }
-            }
-
-            .inner-box-caption {
-                background-color: #d8d8d8;
-            }
-        }
-    }
-
     &.x-huge,
       .x-huge {
         min-width: 45px;
@@ -126,6 +110,10 @@
 
     .inner-box-icon {
         flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 20px;
     }
 
     .inner-box-caption {
@@ -265,7 +253,7 @@
 
     &.open {
         > .btn-toolbar {
-                color: lighten(@gray-lighter, 10%);
+                //color: lighten(@gray-lighter, 10%);
 
                 // Show no shadow for `.btn-link` since it has no other button styles.
                 &.btn-link {
@@ -280,21 +268,10 @@
 
     &.over {
         > button {
-            background-color: @secondary;
+            //background-color: @secondary;
         }
     }
 
-    &.open,
-    &.over {
-        &.split {
-            > button:first-child {
-                z-index: 3;
-                .box-inner-shadow(-1px 0 0 0 @gray-light);
-            }
-        }
-    }
-
-
     &:not(.split) {
         .btn-toolbar {
                 &.dropdown-toggle {
@@ -326,6 +303,58 @@
             }
         }
     }
+
+@color-gray: @secondary;
+@color-dark: @primary;
+//@color-gray: #079e2f;
+//@color-dark: #c52c0e;
+
+    &.split {
+
+        &.over,
+        &.open {
+            box-shadow: inset 0 0 0 1px @color-gray;
+
+            button:not(.active) {
+                background-color: transparent;
+            }
+        }
+
+        &.over {
+            button {
+                &:not(.active) {
+                    &:hover {
+                        background-color: @color-gray;
+                    }
+                }
+
+                &:active,
+                &:active:hover {
+                    background-color: @color-dark;
+                }
+            }
+        }
+
+        &.open {
+            button:not(.active) {
+                &:last-of-type {
+                    background-color: @color-dark;
+                }
+            }
+
+            .caret {
+                background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y;
+            }
+        }
+
+        button.active {
+            background-color: @color-dark;
+        }
+
+        .btn + .btn {
+            margin: 0;
+        }
+    }
 }
 
 .btn-color {