diff --git a/client/assets/css/mixin.scss b/client/assets/css/mixin.scss
new file mode 100644
index 00000000..e4238cf0
--- /dev/null
+++ b/client/assets/css/mixin.scss
@@ -0,0 +1,12 @@
+@mixin ripple($color) {
+    background-position: center;
+    transition: background 0.4s;
+    &:hover{
+        background: #ffffff00 radial-gradient(circle, transparent 1%, $color 1%) center/15000%;
+    }
+    &:active{
+        background-color: #00000033;
+        background-size: 100%;
+        transition: background 0s;
+    }
+}
diff --git a/client/pages/filespage/thing-new.js b/client/pages/filespage/thing-new.js
index 9e54050e..4c70eca3 100644
--- a/client/pages/filespage/thing-new.js
+++ b/client/pages/filespage/thing-new.js
@@ -61,8 +61,12 @@ export class NewThing extends React.Component {
         return (
             <div>
               <div className="menubar no-select">
-                <NgIf cond={this.props.accessRight.can_create_file !== false} onClick={this.onNew.bind(this, 'file')} type="inline">New File</NgIf>
-                <NgIf cond={this.props.accessRight.can_create_directory !== false} onClick={this.onNew.bind(this, 'directory')} type="inline">New Directory</NgIf>
+                <NgIf cond={this.props.accessRight.can_create_file !== false} onClick={this.onNew.bind(this, 'file')} type="inline">
+                  New File
+                </NgIf>
+                <NgIf cond={this.props.accessRight.can_create_directory !== false} onClick={this.onNew.bind(this, 'directory')} type="inline">
+                  New Directory
+                </NgIf>
                 <Dropdown className="view sort" onChange={this.onSortChange.bind(this)}>
                   <DropdownButton>
                     <Icon name="sort"/>
diff --git a/client/pages/filespage/thing.scss b/client/pages/filespage/thing.scss
index 3c3208c8..ef9e6900 100644
--- a/client/pages/filespage/thing.scss
+++ b/client/pages/filespage/thing.scss
@@ -1,3 +1,5 @@
+@import "../../assets/css/mixin.scss";
+
 // Menu for new file and directory
 .menubar{
     font-size: 15px;
@@ -9,15 +11,17 @@
 
     /* Create Buttons */
     > span {
-        border-radius: 2px;
-        padding: 3px 5px;
-        cursor: pointer;
+        display: inline-block;
         margin-right: 5px;
-        &:hover{
-            transtion: 0.15s ease-out background;
-            background: white;
-            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+        margin-top: -2px;
+        border-radius: 2px;
+        cursor: pointer;
+        padding: 3px 5px;
+
+        &:active, &:hover{
+            color: var(--color);
         }
+        @include ripple(var(--bg-color));
     }
 
     > div {cursor: pointer; margin-right: 15px;}
@@ -32,17 +36,9 @@
             border-radius: 2px;
             padding: 5px;
             margin: 2px 0 2px 0;
-            &:hover, &:focus{
-                background: white;
-                border-color: var(--bg-color);
-                box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-            }
-        }
-        &.active > .dropdown_button{
-            background: white;
-            border-color: var(--bg-color);
-            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
         }
+        &.list-grid, & .dropdown_button{ @include ripple(var(--bg-color)); }
+
         .dropdown_container .component_icon{
             box-sizing: border-box;
             border: 2px solid rgba(0,0,0,0);