diff --git a/libs/libqml/plugins/components/Button.qml b/libs/libqml/plugins/components/Button.qml
index adb3c2d8c6..9663fb94c4 100644
--- a/libs/libqml/plugins/components/Button.qml
+++ b/libs/libqml/plugins/components/Button.qml
@@ -1,184 +1,188 @@
 /* This file is part of the KDE project
  * Copyright (C) 2012 Arjen Hiemstra <ahiemstra@heimr.nl>
  *
  *  This program is free software; you can redistribute it and/or modify
  *  it under the terms of the GNU General Public License as published by
  *  the Free Software Foundation; either version 2 of the License, or
  *  (at your option) any later version.
  *
  *  This program is distributed in the hope that it will be useful,
  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *  GNU General Public License for more details.
  *
  *  You should have received a copy of the GNU General Public License
  *  along with this program; if not, write to the Free Software
  *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
 import QtQuick 2.3
 import org.krita.sketch 1.0
 
 Item {
     id: base;
 
     signal clicked();
 
     property alias image: icon.source;
     property color color: Settings.theme.color("components/button/base");
     property alias border: fill.border;
     property alias radius: fill.radius;
     property alias text: label.text;
     property color textColor: Settings.theme.color("components/button/text");
     property alias textSize: label.font.pixelSize;
     property alias bold: label.font.bold;
     property bool shadow: false;
     property bool enabled: true; // XXX: visualize disabledness
     property alias asynchronous: icon.asynchronous;
 
     property bool highlight: false;
     property color highlightColor: Settings.theme.color("components/button/highlight");
 
     property bool checkable: false;
     property bool checked: false;
     property color checkedColor: Settings.theme.color("components/button/checked");
 
     property bool hasFocus: false;
 
     property string tooltip: "";
 
     width: Constants.GridWidth;
     height: Constants.GridHeight;
 
     Rectangle {
         id: fill;
         anchors.fill: parent;
         anchors.margins: 0;
         color: base.highlight && mouse.pressed && base.enabled ? base.highlightColor : base.color;
         visible: true
 
         Rectangle {
             anchors {
                 left: parent.left;
                 right: parent.right;
                 bottom: parent.bottom;
                 margins: fill.radius / 2;
             }
             height: fill.radius / 2;
             radius: fill.radius / 4;
             color: base.textColor;
             visible: base.hasFocus;
             opacity: 0.3
         }
 
         Rectangle {
             id: checkedVisualiser;
             opacity: base.checked ? 1 : 0;
             Behavior on opacity { NumberAnimation { duration: Constants.AnimationDuration; } }
             anchors.fill: parent;
             anchors.margins: 2;
             color: base.checkedColor;
             radius: base.height === base.width ? base.height / 2 - 1 : base.radius;
         }
 
         Image {
             id: icon;
             anchors.fill: parent;
             anchors.margins: 8;
             fillMode: Image.PreserveAspectFit;
             smooth: true;
             asynchronous: true;
             opacity: base.enabled ? 1 : 0.7;
             Behavior on opacity { NumberAnimation { duration: Constants.AnimationDuration; } }
 
             sourceSize.width: width > height ? height : width;
             sourceSize.height: width > height ? height : width;
         }
 
         Label {
             id: label;
             anchors.verticalCenter: parent.verticalCenter;
             height: font.pixelSize;
             width: parent.width;
             horizontalAlignment: Text.AlignHCenter;
             elide: Text.ElideRight;
             opacity: base.enabled ? 1 : 0.7;
             color: base.textColor;
         }
 //         Rectangle {
 //             id: enabledVisualiser;
 //             opacity: base.enabled ? 0 : 0.7;
 //             anchors.fill: parent;
 //             color: "black";
 //         }
     }
 
     SimpleTouchArea {
         anchors.fill: parent;
         onTouched: {
             if (base.enabled) {
                 base.clicked();
                 if ( base.checkable ) {
                     base.checked = !base.checked;
                 }
             }
         }
     }
     MouseArea {
         id: mouse;
         anchors.fill: parent;
         hoverEnabled: true;
         acceptedButtons: Qt.LeftButton | Qt.RightButton;
-        
+
         onClicked: {
             if(mouse.button == Qt.LeftButton && base.enabled) {
                 base.clicked();
                 if ( base.checkable ) {
                     base.checked = !base.checked;
                 }
             } else if(mouse.button == Qt.RightButton && base.tooltip != "") {
                 tooltip.show(base.width / 2, 0);
             }
         }
         onEntered: {
             hoverDelayTimer.start();
         }
         onPositionChanged: {
             if(hoverDelayTimer.running) {
                 hoverDelayTimer.restart();
             }
         }
         onExited: {
             hoverDelayTimer.stop();
             tooltip.hide();
         }
     }
 
     Timer {
         id: hoverDelayTimer;
         interval: 1000;
         onTriggered: { if(base.tooltip != "") tooltip.show(base.width / 2, 0) }
     }
 
     Tooltip {
         id: tooltip;
         text: base.tooltip;
     }
 
     states: State {
         name: "pressed";
         when: (mouse.pressed || base.checked) && enabled;
 
         PropertyChanges {
-            target: mouse
+            target: fill
+            color: base.highlightColor
             anchors.topMargin: 0
         }
     }
 
     transitions: Transition {
+        from: "";
+        to: "down";
+        reversible: true;
         ParallelAnimation {
-            NumberAnimation { properties: "size"; duration: 50; }
-            ColorAnimation { duration: 50; }
+            NumberAnimation { properties: "size"; duration: 150; }
+            ColorAnimation { duration: 150; }
         }
     }
 }
diff --git a/libs/libqml/qmlthemes/default/colors.js b/libs/libqml/qmlthemes/default/colors.js
index dddf2f2613..d3b4f080e6 100644
--- a/libs/libqml/qmlthemes/default/colors.js
+++ b/libs/libqml/qmlthemes/default/colors.js
@@ -1,292 +1,292 @@
 /* This file is part of the KDE project
  * Copyright (C) 2014 Arjen Hiemstra <ahiemstra@heimr.nl>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation; either version 2 of the License, or
  * (at your option) any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  */
 
 var values = {
     base: {
         base: "#a0a0a0",
         text: "#ffffff",
         header: "#000000",
         headerText: "#ffffff",
     },
 
     components: {
         button: {
-            base: "transparent",
+            base: "gray",
             text: "#ffffff",
-            highlight: "transparent",
+            highlight: "lightgray",
             checked: Qt.rgba(1.0, 1.0, 1.0, 0.7),
         },
         colorSwatch: {
             border: "silver",
         },
         dialog: {
             modalOverlay: Qt.rgba(0.0, 0.0, 0.0, 0.5),
             background: {
                 start: "#F7F8FC",
                 stop: "#F0F0FA",
             },
             header: "#9AA1B2",
             headerText: "#ffffff",
             progress: {
                 background: "#ffffff",
                 border: "silver",
                 bar: "gray",
             },
             button: "#9AA1B2",
             buttonText: "#ffffff",
         },
         expandingListView: {
             selection: {
                 border: "#ffffff",
                 fill: Qt.rgba(1.0, 1.0, 1.0, 0.4),
                 text: Qt.rgba(0.0, 0.0, 0.0, 0.65),
             },
             list: {
                 background: Qt.rgba(1.0, 1.0, 1.0, 0.4),
                 item: "#ffffff",
                 itemBorder: "silver",
                 itemText: Qt.rgba(0.0, 0.0, 0.0, 0.65),
             },
         },
         header: "#ffffff",
         label: "#323232",
         listItem: {
             background: {
                 start: "#FBFBFB",
                 stop: "#F0F0F0",
             },
             title: "#000000",
             description: "#333333",
         },
         messageStack: {
             background: "gray",
             border: "silver",
             text: "white",
             button: {
                 fill: "gray",
                 border: "silver",
             },
         },
         newImageList: {
             start: "#FBFBFB",
             stop: "#F0F0F0",
         },
         newsList: {
             listItem: {
                 start: "#FBFBFB",
                 stop: "#F0F0F0",
                 moreLink: "#999999",
             },
             title: "#000000",
             date: "#666666",
             description: "#000000",
             backLink: "#999999",
         },
         panelTextField: {
             border: "silver",
             background: Qt.rgba(1.0, 1.0, 1.0, 0.4),
             enabled: Qt.rgba(0.0, 0.0, 0.0, 0.0),
             disabled: Qt.rgba(0.0, 0.0, 0.0, 0.7),
         },
         rangeInput: {
 
         },
         recentFilesList: {
             start: "#FBFBFB",
             stop: "#F0F0F0",
         },
         scrollDecorator: {
             base: "silver",
             border: "transparent"
         },
         slider: {
             background: {
                 fill: Qt.rgba(1.0, 1.0, 1.0, 0.75),
                 border: "silver",
             },
             handle: {
                 fill: "silver",
                 border: "transparent",
             },
         },
         textField: {
             background: Qt.rgba(1.0, 1.0, 1.0, 0.75),
             border: {
                 normal: "silver",
                 error: "red",
                 focus: "gray",
             },
             placeholder: "#5a5a5a",
         },
         textFieldMultiline: {
             background: Qt.rgba(1.0, 1.0, 1.0, 0.75),
             border: "silver",
         },
     },
 
     panels: {
         dropArea: {
             fill: Qt.rgba(1.0, 1.0, 1.0, 0.25),
             border: "#ffffff",
         },
 
         base: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
         },
 
         presets: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
 
             preset: {
                 active: "#D7D7D7",
                 inactive: "transparent",
             }
         },
 
         layers: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
             subheader: "#cfcfcf",
             editorButtons: {
                 active: "#EAEAEA",
                 inactive: "transparent",
                 text: "gray",
                 border: "silver",
             },
             layer: {
                 active: Qt.rgba(1.0, 1.0, 1.0, 0.5),
                 inactive: Qt.rgba(1.0, 1.0, 1.0, 0.2),
                 background: "#d7d7d7",
                 text: "#000000",
                 visible: "#ffffff",
                 locked: "#ffffff",
             },
         },
 
         selection: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
 
             buttons: {
                 color: Qt.rgba(1.0, 1.0, 1.0, 0.4),
                 text: "black",
                 border: "silver"
             }
         },
 
         filter: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
         },
 
         color: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
         },
 
         tool: {
             base: "#a0a0a0",
             text: "#ffffff",
             header: "#000000",
             headerText: "#ffffff",
             subheader: "#cfcfcf",
         },
 
         menu: {
             base: "#000000",
             text: "#ffffff",
             buttonHighlight: "#dcdcdc",
         },
 
         newImage: {
             background: "#ffffff",
             header: {
                 start: "#707070",
                 stop: "#565656",
                 text: "#ffffff",
             }
         },
 
         openImage: {
             background: "#ffffff",
             header: {
                 start: "#707070",
                 stop: "#565656",
                 text: "#ffffff",
             }
         },
     },
 
     pages: {
         welcome: {
             background: "#ffffff",
             open:{
                 header: {
                     start: "#707070",
                     stop: "#565656",
                     text: "#ffffff",
                 },
             },
             create: {
                 header: {
                     start: "#565656",
                     stop: "#707070",
                     text: "#ffffff",
                 },
             },
             news: {
                 header: {
                     start: "#707070",
                     stop: "#565656",
                     text: "#ffffff",
                 },
             },
         },
         open: {
             background: "#ffffff",
             location: "#ffffff",
         },
         save: {
             background: "#ffffff",
             location: "#ffffff",
             footer: "#000000",
         },
         customImagePage: {
             background: "#ffffff",
             groupBox: "lightGray",
             controls: {
                 background: Qt.rgba(1.0, 1.0, 1.0, 0.4),
                 border: "white",
             },
         }
     },
 }