diff --git a/src/settingsTab.ts b/src/settingsTab.ts
index fb3c019..9e893b6 100644
--- a/src/settingsTab.ts
+++ b/src/settingsTab.ts
@@ -277,17 +277,17 @@ export class SQLSealChartsSettingTab extends PluginSettingTab {
                 
                 // Show success feedback
                 formatButton.textContent = '✓ Formatted';
-                formatButton.style.backgroundColor = '#4caf50';
+                formatButton.classList.add('sqlseal-format-success');
                 setTimeout(() => {
                     formatButton.textContent = 'Format JSON';
-                    formatButton.style.backgroundColor = '';
+                    formatButton.classList.remove('sqlseal-format-success');
                 }, 1500);
             } catch (e) {
                 formatButton.textContent = '✗ Invalid JSON5';
-                formatButton.style.backgroundColor = '#ff6b6b';
+                formatButton.classList.add('sqlseal-format-error');
                 setTimeout(() => {
                     formatButton.textContent = 'Format JSON';
-                    formatButton.style.backgroundColor = '';
+                    formatButton.classList.remove('sqlseal-format-error');
                 }, 2000);
             }
         });
diff --git a/styles.css b/styles.css
index 3a533d8..d66e6fe 100644
--- a/styles.css
+++ b/styles.css
@@ -280,4 +280,13 @@
     cursor: pointer;
     font-size: 12px;
     transition: all 0.2s ease;
+}
+
+/* Success and Error States for Format Button */
+.sqlseal-format-success {
+    background-color: #4caf50 !important;
+}
+
+.sqlseal-format-error {
+    background-color: #ff6b6b !important;
 }
\ No newline at end of file