diff --git a/components/button/style.scss b/components/button/style.scss
index 43c3d627..6c6042ff 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -11,6 +11,7 @@
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
+  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   border: 0;
@@ -103,6 +104,10 @@
   .icon {
     line-height: $button-floating-height;
   }
+
+  [data-react-toolbox="ripple"] {
+    border-radius: 50%;
+  }
 }
 
 .primary:not([disabled]) {
diff --git a/components/ripple/style.scss b/components/ripple/style.scss
index 2b1709bc..d7339f41 100644
--- a/components/ripple/style.scss
+++ b/components/ripple/style.scss
@@ -3,6 +3,7 @@
 
 %ripple {
   position: absolute;
+  z-index: $z-index-high;
   pointer-events: none;
   background-color: currentColor;
   border-radius: 50%;
@@ -18,6 +19,8 @@
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: $z-index-normal;
+  overflow: hidden;
   pointer-events: none;
 }