diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs
index 3d3c606..aed47be 100644
--- a/gh-pages/src/pages/button/mod.rs
+++ b/gh-pages/src/pages/button/mod.rs
@@ -9,18 +9,20 @@ pub fn ButtonPage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Button"</h1>
             <Demo>
-                <Button type_=ButtonType::PRIMARY>
-                    "PRIMARY"
-                </Button>
-                <Button type_=ButtonType::SOLID>
-                    "SOLID"
-                </Button>
-                <Button type_=ButtonType::TEXT>
-                    "TEXT"
-                </Button>
-                <Button type_=ButtonType::LINK>
-                    "LINK"
-                </Button>
+                <Space>
+                    <Button type_=ButtonType::PRIMARY>
+                        "PRIMARY"
+                    </Button>
+                    <Button type_=ButtonType::SOLID>
+                        "SOLID"
+                    </Button>
+                    <Button type_=ButtonType::TEXT>
+                        "TEXT"
+                    </Button>
+                    <Button type_=ButtonType::LINK>
+                        "LINK"
+                    </Button>
+                </Space>
                 <DemoCode slot html=highlight_str!(r#"
                     <Button type_=ButtonType::PRIMARY>
                         "PRIMARY"
@@ -40,18 +42,20 @@ pub fn ButtonPage() -> impl IntoView {
             </Demo>
             <h3>"color"</h3>
             <Demo>
-                <Button color=ButtonColor::PRIMARY>
-                    "PRIMARY Color"
-                </Button>
-                <Button color=ButtonColor::SUCCESS>
-                    "SUCCESS Color"
-                </Button>
-                <Button color=ButtonColor::WARNING>
-                    "WARNING Color"
-                </Button>
-                <Button color=ButtonColor::ERROR>
-                    "ERROR Color"
-                </Button>
+                <Space>
+                    <Button color=ButtonColor::PRIMARY>
+                        "PRIMARY Color"
+                    </Button>
+                    <Button color=ButtonColor::SUCCESS>
+                        "SUCCESS Color"
+                    </Button>
+                    <Button color=ButtonColor::WARNING>
+                        "WARNING Color"
+                    </Button>
+                    <Button color=ButtonColor::ERROR>
+                        "ERROR Color"
+                    </Button>
+                </Space>
                 <DemoCode slot html=highlight_str!(r#"
                     <Button color=ButtonColor::PRIMARY>
                         "PRIMARY Color"
@@ -71,11 +75,13 @@ pub fn ButtonPage() -> impl IntoView {
             </Demo>
             <h3>"icon"</h3>
             <Demo>
-                <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
-                    "ERROR Color Icon"
-                </Button>
-                <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
-                </Button>
+                <Space>
+                    <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
+                        "ERROR Color Icon"
+                    </Button>
+                    <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                    </Button>
+                </Space>
                 <DemoCode slot html=highlight_str!(r#"
                     <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
                         "ERROR Color Icon"
@@ -88,8 +94,10 @@ pub fn ButtonPage() -> impl IntoView {
             </Demo>
             <h3>"style"</h3>
             <Demo>
-                <Button style="background: blue;">"style blue"</Button>
-                <Button style="width: 40px; height: 20px">"size"</Button>
+                <Space>
+                    <Button style="background: blue;">"style blue"</Button>
+                    <Button style="width: 40px; height: 20px">"size"</Button>
+                </Space>
                 <DemoCode slot html=highlight_str!(r#"
                     <Button style="background: blue;">"style blue"</Button>
                     <Button style="width: 40px; height: 20px">"size"</Button>
diff --git a/src/button/button.css b/src/button/button.css
index 16c800b..eeec107 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -19,6 +19,12 @@
     background-color: var(--background-color-hover);
 }
 
+.melt-button:active {
+    transition: all 0.3s;
+    border-color: var(--border-color-hover);
+    background-color: var(--background-color-active);
+}
+
 .melt-button--text,
 .melt-button--link {
     border: none;
diff --git a/src/button/mod.rs b/src/button/mod.rs
index de4dceb..52acc24 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -39,6 +39,15 @@ impl ButtonColor {
             ButtonColor::ERROR => theme.common.color_error_hover.clone(),
         }
     }
+
+    pub fn theme_color_active(&self, theme: &Theme) -> String {
+        match self {
+            ButtonColor::PRIMARY => theme.common.color_primary_active.clone(),
+            ButtonColor::SUCCESS => theme.common.color_success_active.clone(),
+            ButtonColor::WARNING => theme.common.color_warning_active.clone(),
+            ButtonColor::ERROR => theme.common.color_error_active.clone(),
+        }
+    }
 }
 
 #[component]
@@ -56,9 +65,11 @@ pub fn Button(
         let theme = theme.get();
         let bg_color = color.get().theme_color(&theme);
         let bg_color_hover = color.get().theme_color_hover(&theme);
+        let bg_color_active = color.get().theme_color_active(&theme);
         if type_.get() == ButtonType::PRIMARY {
             css_vars.push_str(&format!("--background-color: {bg_color};"));
             css_vars.push_str(&format!("--background-color-hover: {bg_color_hover};"));
+            css_vars.push_str(&format!("--background-color-active: {bg_color_active};"));
             css_vars.push_str(&format!("--font-color: #fff;"));
             css_vars.push_str(&format!("--border-color: {bg_color};"));
             css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
diff --git a/src/theme/common.rs b/src/theme/common.rs
index 37688d7..e989f5d 100644
--- a/src/theme/common.rs
+++ b/src/theme/common.rs
@@ -6,12 +6,16 @@ pub struct CommonTheme {
 
     pub color_primary: String,
     pub color_primary_hover: String,
+    pub color_primary_active: String,
     pub color_success: String,
     pub color_success_hover: String,
+    pub color_success_active: String,
     pub color_warning: String,
     pub color_warning_hover: String,
+    pub color_warning_active: String,
     pub color_error: String,
     pub color_error_hover: String,
+    pub color_error_active: String,
 
     pub font_size: String,
     pub font_size_small: String,
@@ -37,12 +41,16 @@ impl CommonTheme {
             font_family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'".into(),
             color_primary: "".into(),
             color_primary_hover: "".into(),
+            color_primary_active: "".into(),
             color_success: "".into(),
             color_success_hover: "".into(),
+            color_success_active: "".into(),
             color_warning: "".into(),
             color_warning_hover: "".into(),
+            color_warning_active: "".into(),
             color_error: "".into(),
             color_error_hover: "".into(),
+            color_error_active: "".into(),
             font_size: "14px".into(),
             font_size_small: "12px".into(),
             font_size_medium: "16px".into(),
@@ -66,12 +74,16 @@ impl ThemeMethod for CommonTheme {
         Self {
             color_primary: "#f5222d".into(),
             color_primary_hover: "#ff4d4f".into(),
+            color_primary_active: "#cf1322".into(),
             color_success: "#18a058".into(),
             color_success_hover: "#36ad6a".into(),
+            color_success_active: "#0c7a43".into(),
             color_warning: "#f0a020".into(),
             color_warning_hover: "#fcb040".into(),
+            color_warning_active: "#c97c10".into(),
             color_error: "#d03050".into(),
             color_error_hover: "#de576d".into(),
+            color_error_active: "#ab1f3f".into(),
             ..CommonTheme::common()
         }
     }
@@ -79,12 +91,16 @@ impl ThemeMethod for CommonTheme {
         Self {
             color_primary: "#d32029".into(),
             color_primary_hover: "#e04648".into(),
-            color_success: "#18a058".into(),
-            color_success_hover: "".into(),
+            color_primary_active: "#ad111e".into(),
+            color_success: "#63e2b7".into(),
+            color_success_hover: "#7fe7c4".into(),
+            color_success_active: "#5acea7".into(),
             color_warning: "#f0a020".into(),
             color_warning_hover: "#fcb040".into(),
+            color_warning_active: "#e6c260".into(),
             color_error: "#d03050".into(),
             color_error_hover: "#de576d".into(),
+            color_error_active: "#e57272".into(),
             ..CommonTheme::common()
         }
     }