diff --git a/components/ui-btn/ui-btn.wxss b/components/ui-btn/ui-btn.wxss
index e1420ca..df087af 100644
--- a/components/ui-btn/ui-btn.wxss
+++ b/components/ui-btn/ui-btn.wxss
@@ -9,6 +9,8 @@
   border-radius: 48rpx;
   line-height: 1;
   box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
   transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
 }
 
@@ -90,3 +92,36 @@
 .ui-btn__text {
   white-space: nowrap;
 }
+
+/* ---- ripple effect ---- */
+.ui-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.35);
+  transform: translate(-50%, -50%);
+  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-btn--primary::before,
+.ui-btn--ghost::before {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+.ui-btn--outline::before,
+.ui-btn--danger::before {
+  background: rgba(var(--primary-rgb, 255, 107, 53), 0.15);
+}
+
+.ui-btn:active::before {
+  width: 400rpx;
+  height: 400rpx;
+  opacity: 1;
+  transition: 0s;
+}